前端如何关闭已经发送的请求

前端如何关闭已经发送的请求

前言

项目中写支付模块，心跳模式请求接口，为了避免产生多个请求同时发送，且都处于请求状态，需要前端处理，在下次请求开始的时候主动关闭未完成的请求。

一、相关介绍

关于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();

总结

关于前端如何关闭已经发送请求的解决方案总结