第一步,首先安装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