1、axios的二次封装
npm i axios //下载axios
首先创建两个文件夹在src目录下；api和config
- 先在 config文件夹下建立一个 index.js；具体代码如下
export default{
baseUrl:{
dev: "http://localhost:8082/mhy", //开发环境
pro: "http://xxx.xx.xx.xx:8082/mhy", //上线环境
}
}
当然我这里是因为我主要写后端springboot，就没有使用什么第三方前端的请求工具
2. 在 api文件夹下建立一个 axios.js；对axios进行二次封装
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)
4. 然后看看具体怎么使用 fileApi.js
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'
5. 当然最后你也可以全局注册一下，然后直接通过proxy调用，也很方便，这里就不多展示了
Original: https://www.cnblogs.com/shuisanya/p/16630320.html
Author: 水三丫
Title: vue axios的二次封装
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/581456/
转载文章受原作者版权保护。转载请注明原作者出处！