前言

最近在項目中遇到一個問題，在連續發送同一請求時，如果第二次請求比第一次請求快，那么實際顯示的是第一次請求的數據，這就會造成數據和我選擇的內容不一致的問題。解決的方案：在后續發送請求時，判斷之前的請求是否完成（同一個接口），如果未完成則立即取消。然后在發送新的請求。

Axios 介紹

Axios是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

Axios 使用 cancel token 取消請求

Axios的 cancel token API 基于cancelable promises proposal，它還處于第一階段。

可以使用 CancelToken.source 工廠方法創建 cancel token，像這樣：

var CancelToken = axios.CancelToken;var source = CancelToken.source();axios.get('/user/12345', { cancelToken: source.token}).catch(function(thrown) { if (axios.isCancel(thrown)) {  console.log('Request canceled', thrown.message); } else {  // 處理錯誤 }});// 取消請求（message 參數是可選的）source.cancel('Operation canceled by the user.');

2.還可以通過傳遞一個 executor 函數到 CancelToken 的構造函數來創建 cancel token：

var CancelToken = axios.CancelToken;var cancel;axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) {  // executor 函數接收一個 cancel 函數作為參數  cancel = c; })});// 取消請求cancel();

我自己在項目中用的是第二種方案：

提取所有的 api 進行封裝:

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.source = c;    })  })}export xxx

具體的業務組件：

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            }        )    }}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。