axios的二次封装

axios二次封装

一、 为什么要进行axios的二次封装

1.基本用例

axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })

2.对于项目

1.项目中存在许多模块，对于多个请求

/api/product/getBaseCategoryList
/api//cart/cartList
....

接口中都出现/api
2.请求拦截器和响应拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果我要在请求前做些事情，多个接口做的同样是事情，每个接口都要写拦截器

3.好处

1.代码封装，重用性高，减少代码量，减低维护难度。

2.统一处理一些常规的问题一劳永逸，如http错误。

3.拦截请求和响应，提前对数据进行处理，如获取token，修改配置项。文章来源地址https://uudwc.com/A/MxRVg

二、封装的案例

//对于axios进行二次封装
import axios from "axios";
//引入进度条
import nProgress from "nprogress";
//引入stroe仓库
import store from "@/store";
import "nprogress/nprogress.css"
const requests = axios.create({
    //配置对象
    baseURL: "/api",
    //超时的时间
    timeout: 5000,

});


//请求拦截器：发送请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情

requests.interceptors.request.use((config) => {
    //config配置对象，对象里面有一个属性很重要，headers请求头

    if (store.state.detail.uuid_token) {
        config.headers.userTempId = store.state.detail.uuid_token
    }
    if (store.state.user.token) {
        config.headers.token = store.state.user.token
    }
    nProgress.start()
    return config
})



//响应拦截器  
requests.interceptors.response.use((res) => {
    //成功的回调函数：服务器响应的数据回来以后，响应拦截器可以检测到，可以做一些事情
    nProgress.done()
    return res.data
}, (err) => {
    //响应失败的回调函数
    return Promise.reject(new Error('faile'))
})


export default requests;