网站域名云服务器是什么,建程网会员共享,百度提交网站地图,东莞网站优化推广axios本身功能已经很强大了#xff0c;封装也无需过度#xff0c;只要能满足自己项目的需求即可。 常规axios封装#xff0c;只需要设置#xff1a;
实现请求拦截实现响应拦截常见错误信息处理请求头设置
import axios from axios;// 创建axios实例
const service axios… axios本身功能已经很强大了封装也无需过度只要能满足自己项目的需求即可。 常规axios封装只需要设置
实现请求拦截实现响应拦截常见错误信息处理请求头设置
import axios from axios;// 创建axios实例
const service axios.create({baseURL: process.env.VUE_APP_BASE_API, // api的base_urltimeout: 5000 // 请求超时时间
});// 请求拦截器
service.interceptors.request.use(config {// 可以在这里添加请求头等信息// 例如config.headers[Authorization] your token;// config.data qs.stringify(config.data); // 序列化,比如表单数据return config;},error {// 请求错误处理return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use(response {// 对响应数据做处理例如只返回data部分const res response.data;// 如果返回的状态码为200说明成功可以直接返回数据if (res.code 200) {return res;} else {// 返回的状态码非200说明有错误此处可以根据后端返回的错误码进行进一步处理return Promise.reject(res || error);}},error {// 服务器返回的错误处理return Promise.reject(error);}
);export default service;
需要取消接口调用的场景
假如一个页面接口太多、或者当前网络太卡顿、这个时候跳往其他路由当前页面可以做的就是把请求中断掉优化假如当前接口调取了第一页数据又调去了第二页的数据当我们调取第二页数据时就需要把第一页数据的请求中断掉 (常见于在搜索大数据)tab频繁切换取消切换前的tab接口请求取消下载。
AbortController 取消接口请求 从 v0.22.0 开始Axios 支持以 fetch API 方式—— AbortController 取消请求。AbortController 接口表示一个控制器对象允许你根据需要中止一个或多个 Web 请求。 代码实现 1、将中止控制器传递给 axios 的 调去接口的方法controller new AbortController() 2、axios里面有定义标识的属性signal 3、点击取消controller.abort()
const controller new AbortController();axios.get(/foo/bar, {signal: controller.signal
}).then(function(response) {//...
});
// 取消请求
controller.abort()需要重发的场景
比如有重要的接口一旦调取失败会影响整个页面的展示和使用在用户网络不好等情况下导致接口调用失败。
解决
在响应拦截返回失败时进行重试设置重试次数的参数再次发送请求
模拟 axios timeout: 2000,服务端加个延时3s。 axios里面设置两个参数{ retries: 3, // 设置重试次数为3次 retryDelay: 1000, // 设置重试的间隔时间 } 完整代码
script setup langts
import axios from axiosconst request axios.create({baseURL: http://localhost:3000,// 设置请求超时时间为2秒timeout: 2000,retries: 3, // 设置重试次数为3次retryDelay: 1000, // 设置重试的间隔时间
} as any)// 添加响应拦截器
request.interceptors.response.use((response) {// 对响应数据做些什么return Promise.resolve(response.data)},(error) {const config error.config// 如果config不存在或未设置重试选项则拒绝if (!config || !config.retries) {return Promise.reject(error)}// 设置变量来跟踪重试次数config.__retryCount config.__retryCount || 0// 检查是否达到最大重试次数if (config.__retryCount config.retries) {return Promise.reject(error)}// 增加重试计数器config.__retryCount 1// 创建一个新的Promise来处理每次重试之前等待一段时间const backoff new Promise((resolve) {setTimeout(() {resolve(重新请求 config.__retryCount)}, config.retryDelay || 1)})// 返回Promise以便Axios知道我们已经处理了错误return backoff.then((txt) {console.log(txt)return request(config)})},
)// 请求中止控制器
let controller: AbortController
// --- 获取数据 ---
const getData async () {controller new AbortController()const res await request({signal: controller.signal, // 添加请求中止标识method: GET,url: /delay_3s_data,})console.log(成功, res)
}const stop () {// 中止网络请求controller.abort()console.log(取消)
}
/scripttemplateh1axios请求重试/h1button clickgetData()发送请求/buttonbutton clickstop()中止请求/button
/template
