axios 拦截器能够让咱们在我的项目中对后端 http 申请和响应主动拦挡解决，缩小申请和响应的代码量，晋升开发效率同时也不便我的项目前期保护。在申请响应的 interceptors(因特塞泼特斯). 这个外面的话. 他分为申请拦截器和响应拦截器, 申请拦截器外面个别在申请头外面携带 token 值. 响应拦截器外面对状态码的判断. 比方说返回 401 的时候就是 token 没权限. 跳转到登录界面.
封装 axiso 首先下载
npm install axios创立文件夹 request，在文件夹中创立 index.ts 文件名，开始对 axios 进行手动封装封装 或 官网复制粘贴拦截器(https://www.axios-http.cn/docs/interceptors)
- 首先引入下载好的 aixos
- 创立实例
-
申请拦挡，别离蕴含申请胜利 和 申请谬误两个函数
- 执行机会为：发动申请时，申请还没有发送进来时执行 申请拦挡
- 申请胜利：申请头携带 token
- 申请谬误：产生谬误申请时，能够解决 4 结尾的谬误
-
响应拦挡，别离包响应胜利 和 响应失败两个函数
- 执行机会为：申请完结后，服务器有响应的时候执行
- 响应胜利：返回状态码为 2xx(200…)携带的数据
- 响应失败：响应失败 / 谬误时，能够对 5 结尾的状态码进行解决、申请超时、谬误状态码的解决。
- 导出封装好的 axios
手动封装 axios 代码详情
// 引入 axios
import axios from axios
// 进度条和款式
import nProgress from "nprogress" // npm install nprogress
import "nprogress/nprogress.css"
// 实例化 axios
const install = axios.create({
// 申请地址的前缀 公共全局的 URL
baseURL:"",
// 申请时长 --- 超出定义的时长，申请超时
timeout:5000
})
// 申请拦挡
install.interceptors.request.use((config)=>{
// 开始进度条
nProgress.start()
// 获取 token
const token = localStorge.getItem('token')
// 申请头携带 token
config.headers[''] ="Bearer " + token
return config
},
(error)=>{return Promise.reject(error)
}
)
// 响应拦挡
install.interceptors.response.use((response)=>{
// 响应胜利敞开进度条
nProgress.done()
// 返回响应的数据
return response
},
(error)=>{
// 申请超时解决
if(error.message.includes('timeout')){alert('申请超时')
return;
}
// 不同谬误状态码解决
const code = error.response.status;
switch(code){
case 400:
console.log('申请谬误');
break;
case 401:
console.log('未受权');
break;
case 403:
console.log('禁止拜访');
break;
case 404:
console.log('页面隐没');
break;
case 500:
console.log('服务器外部谬误');
break;
case 502:
console.log('网关谬误');
break;
}
return Promise.reject(error)
}
)
// 导出封装好的 aixos以上是 axios 两次封装，咱们还能够将他们的申请形式也封装一下，比方在同文件夹内新建一个 methods.ts 文件，而后如下代码：
// 引入封装好的 axios
import install from "./index"
// 定义任意类型接口
interface anyType{[key:string]:any | (string|number)
}
// 定义类型接口
interface dataType{
url:string, // 门路
method?:string, // 申请办法 get / post...
headers?:anyType, // 申请头
params?:anyType, // get 申请携带参数用的
data?:anyType, // post 申请携带参数用的
}
// 创立 get 申请办法
export const get = (data:dataType)=>{
// 定义申请办法
data.method = "GET"
// 返回
return install(data)
}
// 创立 post 申请办法
export const = (data:dataType)=>{
// 定义 post 申请办法
data.method = "POST"
// 返回
return install(data)
}URL=http://172.16.10.111:5886/#/
模仿申请
// 引入封装好的 get post 申请办法
import {get,post} from "./methods"
// 模仿一个申请接口
export const getLogin = (data) =>{
return get({
url:"申请的门路",
data:data // 传递参数
})
}
最初只须要在组件内调用 getLogin 这个办法即可。
更具体的封装
/**
*
* axios
*
* 封装 axios 逻辑
* 1. 下载依赖
* 2. 创立文件
* 3. 导入 / 引入 axios
* 4. 增加默认配置
* 5. 定义返回的数据类型
* 6. 增加拦截器
* 7. 封装申请办法
* 8. 导出 / 抛出 实例
*
*
* 1.AxiosInstance
* 示意：* axios 实例的配置项 url 办法 headers 参数
* 2.AxiosRequestConfig
* 示意：* axios 实例的类型
* 3.AxiosResponse
* 示意：* axios 响应的数据结构 状态码 响应头 响应数据
* 4.AxiosError
* 示意:
* axios 申请产生谬误的谬误对象 错误信息 申请配置
* 5.InternalAxiosRequestConfig
* 示意：* 扩大了 AxiosRequestConfig 接口
*
*/
// 导入
import axios, {AxiosInstance, AxiosResponse, AxiosRequestConfig, AxiosError, InternalAxiosRequestConfig} from 'axios';
// 默认配置 实例化
const instance: AxiosInstance = axios.create({
baseURL: import.meta.url || "", // 设置 api 的根本门路 相当于 默认的根目录
timeout: 5000, // 申请时长
})
// 申请拦截器
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
//
return config;
},
// 申请地址谬误
(error: AxiosError) => {return Promise.reject(error);
}
)
// 响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
// 判断
if (response.status === 200) {return response.data} else {
// 如果响应状态码不是 200 返回一个回绝的 Promise
// Promise 三个状态 别离 胜利，失败，进行中
return Promise.reject()}
},
(error: AxiosError) => {// return Promise.reject(error);
throw new Error("Http Error:" + error)
}
)
// 导出
export default instance
// 定义后果 接口的 result
// unknown 未知类型
export interface Result<T = unknown> {
message: string;
code: number;
data: T;
[key: string]: any; // 其余任意类型
}
// 申请后果的类型 Result
/*
定义一个名为 Result 的接口 默认类型为 泛型 T unknown 未知类型
接口是一种用户形容对象构造的类型
接口的属性都有
message：字符串类型，代表后果的音讯信息
code：数字类型，代表后果的状态
data：泛型类型 T, 代表后果的数据 默认为 unknown 类型
[key:string]:any：索引签名，代表接口能够具备任意数量的其余属性，属性名为字符串类型，属性值为任意类型
PS:
通过定义这个接口，咱们能够在代码中应用 Result 类型来示意一个具备特定构造的后果对象。例如，能够应用 Result<number> 来示意一个具备数字类型数据的后果对象。*/
// 定义后果接口的 result
export interface Result<T = unknown> {
message: string;
code: number;
data: T;
[key: string]: any; // 其余的任意类型
}
// axios.get("xxxx", { params: {} });
export const http = {get<T = any>(url: string, params?: object): Promise<Result<T>> {console.log(params);
return service.get<T, Result<T>>(url, { params});
},
post<T = any>(url: string, data?: object): Promise<Result<T>> {return service.post<T, Result<T>>(url, data);
},
put<T = any>(url: string, data?: object): Promise<Result<T>> {return service.put<T, Result<T>>(url, data);
},
delete<T = any>(url: string, data?: object): Promise<Result<T>> {return service.delete<T, Result<T>>(url, data);
},
};
export const http = {// axios.get('xxx 门路',{params:{}}) 原型
get<T = any>(url: string, params?: object): Promise<Result<T>> {return instance.get<T, Result>(url, {params})
},
post<T = any>(url:string,data?:object): Promise<Result<T>> {return instance.post<T, Result<T>>(url, {data});
},
put<T = any>(url:string,data?:object): Promise<Result<T>> {return instance.put<T,Result<T>>(url, {data});
},
delete<T =any>(url:string,data?:object): Promise<Result<T>> {return instance.delete<T,Result<T>>(url, {data});
},
}
解析
这段代码是应用 TypeScript 定义的一个 HTTP 申请库的封装。这段代码次要蕴含两个局部，一个是 Result 接口，另一个是 http 对象。Result 接口
Result 接口定义了返回后果的通用构造。它蕴含以下属性：message: 字符串类型，通常用于形容操作的后果音讯。code: 数字类型，通常用于示意操作的返回状态码。data: 能够是任何类型，用于存储申请返回的数据。[key: string]: any;: 这是一个残余属性，意味着能够增加任何其余类型的属性。这个接口能够用来定义 HTTP 申请的响应格局，使得调用者能够不便地解决返回后果。http 对象
http 对象提供了常见的 HTTP 申请办法，并对每个办法进行了泛型参数化，使得返回后果能够灵便地适应不同的数据类型。get 办法：用于发送 GET 申请。它承受一个 URL 和可选的参数对象，返回一个 Promise 对象，该 Promise 在申请实现后解析为 Result 类型。调用示例：http.get<User>('/users/123').
post 办法：用于发送 POST 申请。它承受一个 URL、一个可选的申请数据对象，返回一个 Promise 对象，该 Promise 在申请实现后解析为 Result<T> 类型，其中 T 是申请数据对象的类型。调用示例：http.post<User>('/users', userData).
put 办法：用于发送 PUT 申请。它承受一个 URL、一个可选的申请数据对象，返回一个 Promise 对象，该 Promise 在申请实现后解析为 Result<T> 类型，其中 T 是申请数据对象的类型。调用示例：http.put<User>('/users/123', userData).
delete 办法：用于发送 DELETE 申请。它承受一个 URL 和一个可选的申请数据对象，返回一个 Promise 对象，该 Promise 在申请实现后解析为 Result<T> 类型，其中 T 是申请数据对象的类型。调用示例：http.delete<User>('/users/123').
*** 如何调用和创立接口
这段代码没有明确提供如何创立和实例化接口或类的具体步骤，因而无奈提供对于这部分的具体阐明。但通常来说，你能够应用 TypeScript 的类和接口来创立和实例化对象，而后应用这些对象的办法。例如：typescript
复制代码
import {http, Result} from './http'; // 导入 http 和 Result 接口
// 应用 http.get 发送 GET 申请
http.get<User>('/users/123').then(response => {console.log(response.data); // 打印返回的用户数据
});
详解
/*
get 申请办法 办法名为 get
应用了 泛型 <T = any>
默认是类型为 any(任意类型)
get<T = any>(url:string,params?:object):Promise<Result = unknow>{return aixos.get<T,Result<T>>(url,params)
}
他承受两个参数
第一个是 url(门路)字符串类型
第二个是 params(承受参数的)可选参数 对象类型
get 办法 返回一个 promise 对象
这个对象是一个未知类型的 Result(申请后果)对象
函数外部 调用了 axios 中 get 申请办法，同时传入了 url(字符串类型) 和 params(可选对象类型)
外部的 get 申请办法也应用了泛型
他承受两个类型参数
第一个类型参数是 T（any）第二个类型参数是 Result<T>
返回一个 Promise 对象
返回的 Promise 对象的后果可能是一个 T 类型的值
或者是一个 Result<T> 类型的值
总结:
这个办法的作用是发送一个 Get 申请，返回一个 Promise 对象，这个 Promise 对象的后果是一个 Result 对象
Result 对象可能蕴含一个 T 类型的值，也可能是蕴含一个 Result<T> 类型的值
*/
发送一个申请，默认类型泛型 (any) 任意类型 返回一个 promise 对象，承受两个参数 url(字符串类型) 和 params(可选参数类型对象)
输出 一个 aixos 申请形式默认类型 泛型 或 Result 泛型，传递两个参数 url 和 params(ps：已定义好类型))援用 / 调用
引入
import {http} from '@/utils/Request'
http.get('www.baidu.com').then(res=>{console.log(res,'111');
})