关于axios的二次封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于axios的二次封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

@1 第一步我们一般都会先导入axios
import axios from ‘axios’
@2 第二步创建axios的实例可以同时创建多个实例每个实例配置不同
const http = axios.create( {
        // 这里面可以做一些基础的配置比如基础路径，axios 请求超时的时间
        baseURL:'https://www.baidu.com'，
timeout：60000
         })
@3 只针对post请求，请求主体做格式化的处理，安装后台的要求，如果不设置transfromRequest
会把Data对象转化为JSON字符串传递给服务器， axios内部会识别常用的数据格式，自动设
        置请求头中的Content-Type
http.defaults.transfromRequest = data =>{
if(typeof data === 'object') qs.stringfy(data) // qs.stringfy是转化为name='zs'$age=12
return data
        }
http.default.validateStatus = status = > {
return status >= 200 && status < 400 // 设置状态码在200到400之间都是成功的
        }
@4 设置请求拦截器并且携带token
http.interceptors.request.use(config=>{
if(localstorags.getItem('token')){
config.headers.authorzation = localstorage.getItem('token')
                 }
return config
        })
@5 设置响应拦截器
http.intercepotrs.response.use(responst=>{
return responst.data
        }, reson=>{

// 请求失败的处理
let status = reson?.reponse.status
code = reson?.code
if(status){
// 服务器返回的有结果没有经过validateStatus状态码的校验
switch（+status）{
case 404:
alert('请求地址不存在')
        break；
case 500:
alert('服务器发生未知错误')
        break；
。。。
                        }
                 }else if（code==='ECONNABORTED'）{
// 请求超时
alert（‘当前请求超时’）
                }else if（axios.isCancel(reson)）{
// 请求中断
alert（'请求中断'）
                }else {
alert（‘网络中断，请检查网络'）
                }
return Promise.reject(reson)
        })
@ 6 记得导出
export default http文章来源地址https://www.toymoban.com/news/detail-778262.html