axios的二次封装

aioxs为什么要二次封装？

// requert就是axios,只不过稍微配置一下
const requests=axios.create({
    // 基础路径，发送请求的时候，路径当中会出现/api
    baseURL: '/api',
    // 代表请求超时的时间
    timeout:5000,
    
})

1.在发请求时，请求以api开头，可以设定基础路径在每次发送请求时，路径就会自动加上/api

在每次写请求路径时就不用再带着/api直接写后面的路径即可

2.写请求拦截器：发请求之前处理的业务

3.写响应拦截器：当服务器返回数据以后处理的业务

请求拦截器的作用有很多，像进度条的开始就写在请求拦截器中，进度条结束写在响应拦截器中。

一次请求从开始到结束，可以通过进度条向用户展示获取数据的进度。

例如：电商项目，游客的身份登录，通过uuid生成唯一的身份标识，请求以游客身份访问购物车此时api文档中并没有要求传递参数，就需要通过请求头的方式传递给服务器，请求拦截器的参数config中就包含了请求头

// 请求拦截器，在发请求之前，请求拦截器可以监测到，可以请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
    // config配置对象，对象里面有一个属性很重要，请求头
     // 将uuid通过请求头带给服务器
    if(store.state.detail.uuid_token){
        // 给请求头添加字段，和后台商量好了
        config.headers.userTempId=store.state.detail.uuid_token
    }
    // 需要携带token带给服务器
    if(store.state.user.token){
        // JSON.parse(localStorage.setItem("TOKEN"))
        config.headers.token=store.state.user.token
    }


    // 进度条开始动
    nprogress.start()
    return config
})

而响应拦截器做的相对来说比较少，一般用于进度条的结束和对返回数据的简化，例如返回的数据，我们只需要返回数据中的data对象，这样就在后续对数据作出了统一的处理