关于axios的二次封装

2024-01-09 20:26:12

@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://blog.csdn.net/h960822/article/details/135429460
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。