axios的封装
- 下载axios
npm i axios或者yarn add axios - 项目中往往会有很多的接口和请求，将所有接口和请求如果不做统一处理的话就会很繁杂，放在组件当中也会特别乱，因此我们会在src下面新建一个request文件夹来专门管理请求接口
request/request.js中
import axios from "axios"
const insatnce = axios.create({
baseURL:"接口"，//在项目的最后这里的地址是根据配置的环境变量来改变的（代理服务器）
timeout:5000,//请求过期时间
})
export default instance
- 请求拦截器，在同一个文件中
请求拦截器指的是，在页面发送请求的时候，要先经过这个阶段，请求才能被发送到服务器 ，当一个web页面在用户登录之后用户再发送请求时，默认是需要带上请求头的，可以在请求拦截器中做统一处理
import axios from "axios"
const insatnce = axios.create({
baseURL:"接口"，//在项目的最后这里的地址是根据配置的环境变量来改变的（代理服务器）
timeout:5000,//请求过期时间
})
instance.interceptors.request.use(config=>{
//config 是一个对象，携带了本次请求的信息，
//config.header可以携带请求头
//必须返回一个config
config.heder["token"]=token
return config
},err=>{
return Promise.reject(err)
})
export default instance
- 响应拦截器
响应拦截器是，在前端发送请求之后，后端响应的数据会优先经过响应拦截器，并数据返回给组件中请求的res，
import axios from "axios"
const instance = axios.create({
baseURL:"接口"，//在项目的最后这里的地址是根据配置的环境变量来改变的（代理服务器）
timeout:5000,//请求过期时间
})
instance.interceptors.response.use(res=>{
//必须return res
//可以在这里处理错误
return res.data //返回的数据最终被组件接受
})