关于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

相关推荐
uyeonashi28 分钟前
【Boost搜索引擎】构建Boost站内搜索引擎实践
开发语言·c++·搜索引擎
再睡一夏就好31 分钟前
从硬件角度理解“Linux下一切皆文件“,详解用户级缓冲区
linux·服务器·c语言·开发语言·学习笔记
TIF星空2 小时前
【使用 C# 获取 USB 设备信息及进行通信】
开发语言·经验分享·笔记·学习·microsoft·c#
我是Superman丶3 小时前
【技巧】前端VUE用中文方法名调用没效果的问题
前端·javascript·vue.js
斯~内克3 小时前
Vue 3 中 watch 的使用与深入理解
前端·javascript·vue.js
Smile丶凉轩4 小时前
Qt 界面优化(绘图)
开发语言·数据库·c++·qt
reasonsummer4 小时前
【办公类-100-01】20250515手机导出教学照片,自动上传csdn+最大化、最小化Vs界面
开发语言·python
lqj_本人5 小时前
鸿蒙OS&UniApp制作多选框与单选框组件#三方框架 #Uniapp
前端·javascript·uni-app
苏三福5 小时前
ros2 hunmle bag 数据包转为图片数据 python版
开发语言·python·ros2humble
qqxhb7 小时前
零基础学Java——第十一章:实战项目 - 桌面应用开发(JavaFX入门)
java·开发语言·javafx