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