项目中对 axios 进行二次封装
随着前端技术的发展，网络请求这一块，越来越多的程序猿选择使用 axios 来实现网络请求。但是单纯的 axios 插件并不能满足我们日常的使用，因此我们使用时，需要根据项目实际的情况来对 axios 进行二次封装。
接下来就我对 axios 的二次封装详细的说说，主要包括请求之前、返回响应以及使用等。
「1、请求之前」
一般的接口都会有鉴权认证（token）之类的，因此在接口的请求头里面，我们需要带上 token 值以通过服务器的鉴权认证。但是如果每次请求的时候再去添加，不仅会大大的加大工作量，而且很容易出错。好在 axios 提供了拦截器机制，我们在请求的拦截器中可以添加 token。
// 请求拦截axios.interceptors.request.use((config) => { //....省略代码 config.headers.x_access_token = token return config}, function (error) { return Promise.reject(error)})
复制代码
当然请求拦截器中，除了处理添加 token 以外，还可以进行一些其他的处理，具体的根据实际需求进行处理。
「2、响应之后」
请求接口，并不是每一次请求都会成功。那么当接口请求失败的时候，我们又怎么处理呢？每次请求的时候处理？封装 axios 统一处理？我想一个稍微追求代码质量的码农，应该都会选择封装 axios 进行统一处理吧。axios 不仅提供了请求的拦截器，其也提供了响应的拦截器。在此处，可以获取到服务器返回的状态码，然后根据状态码进行相对应的操作。
// 响应拦截axios.interceptors.response.use(function (response) { if (response.data.code === 401 ) {//用户token失效 //清空用户信息 sessionStorage.user = '' sessionStorage.token = '' window.location.href = '/';//返回登录页 return Promise.reject(msg)//接口Promise返回错误状态，错误信息msg可有后端返回，也可以我们自己定义一个码--信息的关系。 } if(response.status!==200||response.data.code!==200){//接口请求失败，具体根据实际情况判断 message.error(msg);//提示错误信息 return Promise.reject(msg)//接口Promise返回错误状态 } return response}, function (error) { if (axios.isCancel(error)) { requestList.length = 0 // store.dispatch('changeGlobalState', {loading: false}) throw new axios.Cancel('cancel request') } else { message.error('网络请求失败,请重试') } return Promise.reject(error)})
复制代码
当然响应拦截器同请求拦截器一样，还可以进行一些其他的处理，具体的根据实际需求进行处理。
「3、使用 axios」
axios 使用的时候一般有三种方式：
axios.get('url',{ params:{},//接口参数}).then(function(res){ console.log(res);//处理成功的函数 相当于success}).catch(function(error){ console.log(error)//错误处理 相当于error})
复制代码
axios.post('url',{ data:xxx//参数 },{ headers:xxxx,//请求头信息}).then(function(res){ console.log(res);//处理成功的函数 相当于success}).catch(function(error){ console.log(error)//错误处理 相当于error})
复制代码
axios({ method:'delete', url:'xxx', cache:false, params:{id:123}, headers:xxx,})//------------------------------------------//axios({ method: 'post', url: '/user/12345', data: { firstName: 'monkey', lastName: 'soft' }});
复制代码
直接使用 api 的方式虽然简单，但是不同请求参数的名字不一样，在实际开发过程中很容易写错或者忽略，容易为开发造成不必要的时间损失。
前面两种方式虽然没有参数不一致的问题，但是使用的时候，太过于麻烦。那么怎么办呢？
前面两种虽然使用过于麻烦，但是仔细观察，是可以发现有一定的相似点，我们便可以基于这些相似点二次封装，形成适合我们使用的一个请求函数。直接上代码：
/**url:请求的url*params:请求的参数*config:请求时的header信息*method:请求方法*/const request = function ({ url, params, config, method }) { // 如果是get请求 需要拼接参数 let str = '' if (method === 'get' && params) { Object.keys(params).forEach(item => { str += `${item}=${params[item]}&` }) } return new Promise((resolve, reject) => { axios[method](str ? (url + '?' + str.substring(0, str.length - 1)) : url, params, Object.assign({}, config)).then(response => { resolve(response.data) }, err => { if (err.Cancel) { } else { reject(err) } }).catch(err => { reject(err) }) })}
复制代码
这样我们需要接口请求的时候，直接调用该函数就好了。不管什么方式请求，传参方式都一样。
最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163 相互学习，我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激 ！
评论