Vue之封装二次axios

第一步，首先安装axios，这里推荐局部安装

npm i -D axios

第二步，在src目录下创建request文件夹，然后在里面创建两个文件http.js、api.js

http.js

import axios from ‘axios’
// 环境的切换
if (process.env.NODE_ENV === ‘development’) {
axios.defaults.baseURL = ‘’ // 开发环境
} else if (process.env.NODE_ENV === ‘debug’) {
axios.defaults.baseURL = ‘’ // 调试环境
} else if (process.env.NODE_ENV === ‘production’) {
axios.defaults.baseURL = ‘’ // 生产环境
}
axios.defaults.timeout = 10000
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data’

// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
// const token = this.$store.state.Authorization
// token && (config.headers.Authorization = token)
// return config
if (localStorage.getItem(‘Authorization’)) {
config.headers.Authorization = localStorage.getItem(‘Authorization’);
}
return config;
},
error => {
return Promise.error(error)
})

// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
},
// 服务器状态码不是200的情况

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119352987