前端如何關閉已經發送的請求

前言

專案中寫支付模塊，心跳模式請求介面，為了避免產生多個請求同時發送，且都處于請求狀態，需要前端處理，在下次請求開始的時候主動關閉未完成的請求，

一、相關介紹

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

總結

關于前端如何關閉已經發送請求的解決方案總結