❝以下文章来自于“前端咖”公众号
❞
在几个公司工作过,我发现我很少看到考虑的比较全面的ajax封装。可能是因为我待过的公司不够优秀吧,也可能是因为我所在的团队不够优秀吧。基于这样的一个情况,我觉得我可以写一个比较全面的基于axios的封装。
这里我只分享一个相对比较全面的基于axios的封装,如果想要更符合你项目的封装,还请自己多理解或者和我交流沟通。
「以下是基于axios封装的代码:」
/**
* http封装请求
*/
import axios from 'axios'
// 超时时间
axios.defaults.timeout = 3000
// http请求拦截器
axios.interceptors.request.use(config => {
return config
}, error => {
return Promise.reject(error)
})
let erorrMap = {
'CMN00000': '成功',
'CMN00001': '输入参数为空',
'CMN00002': '输入参数校验失败'
}
// http响应拦截器
axios.interceptors.response.use(res => {
let code = res.data.code
if (code === 'CMN00000') {
} else {
if (erorrMap[code]) {
//erorrMap[code]
} else {
//'未知错误'
}
}
return res
}, async (error) => {
if (error.request) {
if (error.request.status === 0) {
debugger
//超时
}
} else if (error.response) {
if (error.response.status === 400) {
} else if (error.response.status === 404) {
//未找到资源
} else if (error.response.status === 401) {
//'请先登录'
} else if (error.response.status === 500) {
//'服务器异常'
}
}
return Promise.reject(error)
})
let request = (config) => {
/*let token = window.localStorage.getItem('token')
axios.defaults.headers.common['token'] = token || ''*/
return axios.request(
Object.assign({
method: 'post',
data: {},
params: {}
},
config
)
)
}
export default request
「基于上面的封装,我详细的做一个讲解:」
1,http请求拦截器中的第一个参数是一个函数,在其中可以给每一个请求做一些配置项的处理,比如加时间戳等等。
2,http响应拦截器中的第一个参数同样是一个函数,在其中可以处理http响应code是200时正常或者异常的情况。
3,http响应拦截器中的第二个参数同样是一个函数,在其中可以处理除了http响应code是200以外的情况,比如未登录时的401,可以跳出需要登录才可以查看操作的页面等等。
4,request方法的定义中可以在头headers中加一些token之类配置。
「当然光知道上面的基于axois的封装还不够,还得知道如何使用该封装,代码如下:」
import request from './request'
import * as url from './url'
request(
{
url: url.apiRegister
}
).then((res) => {
let code = res.data.code
if (code === 'CMN00000') {
//成功
} else {
}
}).catch((error) => {
if (error.response) {
} else if (error.request) {
} else {
console.log(error)
}
})
「使用基于axios的封装,我详细介绍一下:」
1,request的返回的是一个promise实例,then方法中是处理http响应code是200的情况,该情况下又分成正常和异常。
2,catch方法中可以处理的异常包括请求异常和其他的异常,其中请求异常包括有数据返回的异常和没数据返回的异常,其他异常包括http请求拦截器中代码异常,http响应拦截器中的代码异常,then方法中代码异常等等。
如果你能搞清楚以上的内容,我想你应该知道如何自己封装一个比较全面的request。
感谢您的认真阅读,喜欢就点个再看吧!