前端如何关闭已经发送的请求
前端如何关闭已经发送的请求
文章目录
- 前端如何关闭已经发送的请求
- 前言
- 一、相关介绍
- 二、解决方案
- 1.【axios】axios.CancelToken;
-
-
- (1) 普通请求（未在axios基础上进行二次封装---统一封装）
- (2) 根据业务需求提取所有的 api 进行封装:
-
- 注意：方案1是解决前端关闭请求比较常用的方法，以下为附带不同类型情况下，取消请求的方案
-
- 2.【原生】XMLHttpRequest.abort();
- 3.【jquery】ajax.abort();
- 4.微信小程序
- 5.【uni-app】 requestTask.abort();
- 总结
前言
项目中写支付模块，心跳模式请求接口，为了避免产生多个请求同时发送，且都处于请求状态，需要前端处理，在下次请求开始的时候主动关闭未完成的请求。
一、相关介绍
关于Axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Axios 使用 cancel token 取消请求
二、解决方案
1.【axios】axios.CancelToken;
(1) 普通请求（未在axios基础上进行二次封装—统一封装）
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// 取消请求
cancel();
(2) 根据业务需求提取所有的 api 进行封装:
util文件夹下的request
import axios from 'axios'
import {
message,
Popconfirm
} from 'antd'
import {
getToken
} from './auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
withCredentials: false, // send cookies when cross-domain requests
timeout: 300100 // request timeout
})
service.interceptors.request.use(
config => {
config.headers['X-Token'] = getToken()
config.headers['contentType'] = "application/json"
return config
},
error => {
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 'success') {
if (res.code === 'noLogin' || res.code === 'user-not-login') {
window.location = '#/login'
}
return Promise.reject(res || 'error')
} else {
return res
}
},
error => {
if (error && error.response) {
console.log('全局的拦截')
console.log(error,'看下error对象')
switch (error.response.status) {
case 400:
error.message = '请检查您的网络'
break
case 401:
error.message = '请检查您的网络'
break
case 403:
error.message = '请检查您的网络'
break
case 404:
error.message = `请求地址出错: ${
error.response.config.url}`
break
case 405:
error.message = '请检查您的网络'
break
case 408:
error.message = '请求超时'
break
case 501:
error.message = '服务器忙,请您稍后尝试'
break
case 502:
error.message = '服务器忙,请您稍后尝试'
break
case 503:
error.message = '服务器忙,请您稍后尝试'
break
case 504:
error.message = '服务器忙,请您稍后尝试'
break
case 505:
error.message = '服务器忙,请您稍后尝试'
break
default:
}
}
return Promise.reject(error)
}
)
export default service
api文件夹下的index.js
import request from '../utils/request' // 配置过的Axios 对象
import axios from 'axios'
export function getLatenessDetailSize(params, that) {
return request({
url: '/api/v1/behaviour/latenessDetailSize',
method: 'post',
params: params,
//取消请求的关键配置
cancelToken: new axios.CancelToken(function executor(c) {
// 设置 cancel token
// 注意：此处that可能会报错，本质上此处是将取消函数暴露出去，可以是传入的组件对象；
// 如果实在无法传入组件对象，也可以将取消请求暴露出来的函数挂到window下
that.source = c;//或者window.source = c
})
})
}
export xxx
组件页面中使用api,并在合适的时机取消请求
import {
getLatenessDetail } from "../api";
export default {
data() {
return {
tableData: [],
total: 0,
page: 1,
loadTable: false,
params: {
},
source: null
}
},
methods: {
cancelQuest() {
if (typeof this.source === 'function') {
this.source('终止请求'); //取消请求
}
},
getTableData(val) {
this.cancelQuest() // 请求发送前调用
this.page = val
this.loadTable = true
getLatenessDetail(this.params, (val - 1) * 10, this)
.then(
res => {
this.loadTable = false
this.tableData = res.data
}
)
}
}
注意：方案1是解决前端关闭请求比较常用的方法，以下为附带不同类型情况下，取消请求的方案
2.【原生】XMLHttpRequest.abort();
如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。
let xhr = new XMLHttpRequest(),
method = "GET",
url = "https://xxx";
xhr.open(method,url,true);
xhr.send();
xhr.abort(); // 终止请求
3.【jquery】ajax.abort();
let jqueryAjax ;
if(jqueryAjax ){
jqueryAjax .abort(); // 终止请求
}
jqueryAjax = $.ajax({
type: "POST",
url:url,
dataType: "json",
success: function(data) {
do thing...
},error: function () {
}
});
4.微信小程序
if (requestTask) {
requestTask.abort(); // 终止请求
}
let requestTask = wx.request({
url: 'xxx',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
5.【uni-app】 requestTask.abort();
const requestTask = uni.request({
url: 'xxx',
data: {
name: 'name',
age: 18
},
success: function(res) {
console.log(res.data);
}
});
// 终止请求
requestTask.abort();
总结
关于前端如何关闭已经发送请求的解决方案总结