vue axios二次封装的详细解析_Mysql_

 npm i axios //下载axios

export default{ baseUrl:{ dev: "http://localhost:8082/mhy", //开发环境 pro: "http://xxx.xx.xx.xx:8082/mhy", //上线环境 } }

import axios from "axios" import config from "@/config" // const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev:config.baseUrl.pro const baseUrl = config.baseUrl.pro class HttpRequest{ //构造器 constructor(baseUrl){ this.baseUrl = baseUrl } //请求路径设置 getInsideConfig(){ const config = { baseURL:this.baseUrl, Header:{} } return config } //添加拦截器 interceptors(instance){ // 添加请求拦截器 instance.interceptors.request.use(function (config) { // 在发送请求之前做些什么 const token = localStorage.getItem("Accept-Token"); if(token !== null && token !== ""){ config.headers["Accept-Token"] = token; } return config; }, function (error) { // 对请求错误做些什么 // console.log('添加请求拦截器 请求错误') return Promise.reject(error); }); // 添加响应拦截器 instance.interceptors.response.use(function (response) { // 对响应数据做点什么 // console.log('添加请求拦截器 响应') return response; }, function (error) { // 对响应错误做点什么 // console.log('添加请求拦截器 响应错误') return Promise.reject(error); }); } // 二次封装的请求 request(options) { const instance = axios.create() options = {...this.getInsideConfig(),...options} this.interceptors(instance) return instance(options) } } export default new HttpRequest(baseUrl)

import axios from "./axios"; // 上传文件图片 export const uploadImgAPI = (param) => { return axios.request({ url: `/uploadImg/${param.id}`, method: "post", data: param.formData }) } // 删除一个文件 export const deleteImgAPI = (param) => { return axios.request({ url: `/deleteImg`, method: "post", data: param }) }

import { deleteImgAPI, uploadImgAPI } from '@/api/fileApi'