搭建商城到底哪家好,成都网站优化哪家好,网站首页备案号链接,新浪体育世界杯请求中断
场景#xff1a;1、假如一个页面接口太多、或者当前网络太卡顿、这个时候跳往其他路由#xff0c;当前页面可以做的就是把请求中断掉#xff08;优化#xff09;2、假如当前接口调取了第一页数据#xff0c;又调去了第二页的数据#xff0c;当我们调取第二页数…请求中断
场景1、假如一个页面接口太多、或者当前网络太卡顿、这个时候跳往其他路由当前页面可以做的就是把请求中断掉优化2、假如当前接口调取了第一页数据又调去了第二页的数据当我们调取第二页数据时就需要把第一页数据的请求中断掉(常见于在搜索大数据)3、取消下载
原理AbortController 接口表示一个控制器对象允许你根据需要中止一个或多个 Web 请求
技术axiosvue3.0模拟AbortController
实现 1、将中止控制器传递给 axios 的 调去接口的方法controller new AbortController()2、axios里面有定义标识的属性signal3、点击事件controller.abort()script setup langts
import axios from axios
import { ref } from vueconst progress ref(0) // 进度条百分比
let controller: AbortController // 中止控制器// 中止下载
const abortDownload () {if (controller) {controller.abort() // 使用 abort 方法中止下载console.log(中止下载)}
}// 下载视频
const fetchVideo () {controller new AbortController() // 创建 AbortControlleraxios({// 将中止控制器传递给 axios 的 get 方法method: GET,url: http://localhost:3000/video,signal: controller.signal,responseType: arraybuffer,onDownloadProgress: (progressEvent) {// 计算进度百分比progress.value Math.round((progressEvent.loaded / progressEvent.total!) * 100)}}).then((response) {console.log(下载完成, response)// ✅ 保存下载的文件const { buffer } new Uint8Array(response.data)const blob new Blob([buffer], { type: application/octet-stream })const link document.createElement(a) // 创建链接元素link.href URL.createObjectURL(blob) // 将 Blob 对象转换为 URLlink.download video.mp4 // 设置文件名link.click() // 模拟点击链接元素}).catch((err) {if (axios.isCancel(err)) {console.log(下载被取消)} else if (err.name AbortError) {console.log(下载被中止)} else {console.error(下载错误${err.message})}})
}
/scripttemplatedivbutton classdownload clickfetchVideo下载视频/buttonbutton classabort clickabortDownload中止下载/buttondiv classprogress-bardiv classprogress :style{ width: progress % }/div{{ progress }}%/div/div
/templatestyle scoped
.progress-bar {height: 20px;background-color: #eee;margin-top: 10px;
}
.progress {width: 0%;height: 100%;background-color: #4caf50;transition: width 0.2s linear;
}
/style请求重试
场景当用户访问我们的 Web 应用程序时HTTP 请求可能会由于网络不稳定而失败例如超时或网络异常。模拟 axios timeout: 2000,服务端加个延时3s。
axios里面设置两个参数{retries: 3, // 设置重试次数为3次retryDelay: 1000, // 设置重试的间隔时间
}
在响应拦截返回失败时进行重试设置重试次数的参数再次发送请求使用 Axios 的拦截器拦截响应则尝试再次发送请求通过设置 retry 和 retryDelay 来控制重试请求的数量和每个请求之间的间隔。
js
script setup langts
import axios from axiosconst request axios.create({baseURL: http://localhost:3000,// 设置请求超时时间为5秒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()
}
/scripttemplateh1axios请求重试/h1button clickgetData()发送请求/buttonbutton clickstop()中止请求/button
/templateaxios-retry 插件 插件可以更方便实现请求重试npm install axios-retry导入以下数据就可以了
// axios-retry 插件
axiosRetry(request, {retries: 3, // 设置重试次数retryDelay: () 500, // 设置重试延迟时间shouldResetTimeout: true, // 重置请求超时时间// error.codeECONNABORTED表示请求超时了 ERR_NETWORK网络出错retryCondition: (error) [ECONNABORTED, ERR_NETWORK].includes(error.code!), // 重试条件
})script setup langts
import axios from axios
import axiosRetry from axios-retryconst request axios.create({baseURL: http://localhost:3000,timeout: 2000,
})// axios-retry 插件
axiosRetry(request, {retries: 3, // 设置重试次数retryDelay: () 500, // 设置重试延迟时间shouldResetTimeout: true, // 重置请求超时时间retryCondition: (error) [ECONNABORTED, ERR_NETWORK].includes(error.code!), // 重试条件
})// 请求中止控制器
let controller: AbortController
// --- 获取数据 ---
const getData async () {// 请求控制器controller new AbortController()const res await request({method: GET,url: /delay_3s_data,signal: controller.signal, // 添加请求中止标识})console.log(成功获取数据, res)
}const stop () {// 中止网络请求controller.abort()
}
/scripttemplateh1axios请求重试-axiosRetry/h1button clickgetData()发送请求/buttonbutton clickstop()中止请求/button
/template推荐阅读
axios的issues 掘金-Axios 项目有哪些值得借鉴的地方
