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，修改配置项。

二、封装的案例

//对于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(newError('faile'))})exportdefault requests;