// app.ts
const express = require('express')
const app = express()
const cors = require('cors')
app.use(cors())
app.get('/tab1', (req, res) => {
  res.send('這是tab1的內(nèi)容...')
})
app.get('/tab2', (req, res) => {
  setTimeout(() => {
    res.send('這是tab2的內(nèi)容...')
  }, 3000)
})
app.get('/tab3', (req, res) => {
  res.send('這是tab3的內(nèi)容...')
})
app.listen('3000', () => {
  console.log('server running at 3000 port...')
})

import axios, { AxiosRequestConfig } from 'axios'
// 新建一個(gè)axios實(shí)例
const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})
export function request(Args: AxiosRequestConfig) {
  return ins.request(Args)
}

// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request } from '@/utils/request'
const context = ref('tab1的內(nèi)容...')
const getTab1Context = async () => {
  const { data } = await request({
    url: '/tab1',
  })
  context.value = data
}
const getTab2Context = async () => {
  const { data } = await request({
    url: '/tab2',
  })
  context.value = data
}
const getTab3Context = async () => {
  const { data } = await request({
    url: '/tab3',
  })
  context.value = data
}
</script>

// bar.vue
<template>
  <div class="container">
    <div class="context">{{ context }}</div>
    <div class="btns">
      <el-button type="primary" @click="getTab1Context">tab1</el-button>
      <el-button type="primary" @click="getTab2Context">tab2</el-button>
      <el-button type="primary" @click="getTab3Context">tab3</el-button>
    </div>
  </div>
</template>

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
    cancelToken: source.token
}).catch(function (thrown) {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else { /* 處理錯(cuò)誤 */ }
});
axios.post('/user/12345', {
    name: 'new name'
}, {
    cancelToken: source.token
});
// 取消請(qǐng)求 (message 參數(shù)是可選的)
source.cancel('Operation canceled by the user.');

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
        // executor 函數(shù)接收一個(gè) cancel 函數(shù)作為參數(shù)
        cancel = c;
    })
});
// 取消請(qǐng)求
cancel();

// request.ts
import axios, { AxiosRequestConfig } from 'axios'
const CancelToken = axios.CancelToken
const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})
// 新建一個(gè)取消請(qǐng)求函數(shù)并導(dǎo)出
export let cancelFn = (cancel: string) => {
  console.log(cancel)
}
export function request(Args: AxiosRequestConfig) {
  // 在請(qǐng)求配置中增加取消請(qǐng)求的Token
  Args.cancelToken = new CancelToken(function (cancel) {
    cancelFn = cancel
  })
  return ins.request(Args)
}

// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request, cancelFn } from '@/utils/request'
const context = ref('tab1的內(nèi)容...')
const getTab1Context = async () => {
  cancelFn('取消了tab2的請(qǐng)求')
  const { data } = await request({
    url: '/tab1',
  })
  context.value = data
}
const getTab2Context = async () => {
  const { data } = await request({
    url: '/tab2',
  })
  context.value = data
}
const getTab3Context = async () => {
  cancelFn('取消了tab2的請(qǐng)求')
  const { data } = await request({
    url: '/tab3',
  })
  context.value = data
}
</script>

// request.ts
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})
// 新建一個(gè)取消請(qǐng)求函數(shù)并導(dǎo)出
export let cancelFn = (cancel: string) => {
  console.log(cancel)
}
export function request(Args: AxiosRequestConfig): Promise<AxiosResponse> {
  return new Promise((resolve, reject) => {
    ins.request(Args).then((res: AxiosResponse) => {
      resolve(res)
    })
    cancelFn = (msg) => {
      reject(msg)
    }
  })
}

// cancelClass.ts
import { AxiosResponse } from 'axios'
export class CancelablePromise {
  pendingPromise: any
  reject: any
  constructor() {
    this.pendingPromise = null
    this.reject = null
  }
  handleRequest(requestFn: any): Promise<AxiosResponse> {
    if (this.pendingPromise) {
      this.cancel('取消了上一個(gè)請(qǐng)求。。。')
    }
    const promise = new Promise((resolve, reject) => (this.reject = reject))
    this.pendingPromise = Promise.race([requestFn(), promise])
    return this.pendingPromise
  }
  cancel(reason: string) {
    this.reject(reason)
    this.pendingPromise = null
  }
}

// request.ts
export function request(Args: AxiosRequestConfig) {
  return () => ins.request(Args)
}

// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request, cancelFn } from '@/utils/request'
import { CancelablePromise } from '@/utils/cancelClass'
...
const cancelablePromise = new CancelablePromise()
...
const getTab2Context = async () => {
  const { data } = await cancelablePromise.handleRequest(
    request({
      url: '/tab2',
    })
  )
  context.value = data
}
</script>