奇趣5分彩

前端打消要求及打消反复要求体例

 更新时辰：2022年07月08日 16:07:38   作者：仍是阿谁大斌啊  
这篇文章首要为大师先容了前端打消要求及打消反复要求体例，奇趣5分彩须要的伴侣能够或许或许鉴戒参考下，但愿能够或许或许奇趣5分彩所赞助，祝大师多多前进，早日升职加薪

一、媒介

明天，我想跟大师分享几种前端打消要求的几种体例。

信任大师在日奇趣5分彩平凡的开辟奇趣5分彩，必定或多或少的会碰到须要打消反复要求的场景，比方最罕见的，咱们在利用tab栏时，咱们城市利用一个盒子去寄存内容，而后在切换tab栏时，会清撤除本来的内容，而后替代上新的内容，这个时辰，若是咱们的数据是经由进程办事从后端获得的，就会存在一个题目，由于获得数据是须要必然的时辰的，就会存在当咱们切换tab栏到新的tab页时，本来的tab页的办事还在呼应奇趣5分彩，这时辰新的tab页的数据办事已呼应完奇趣5分彩了，且页面已显现了新的tab页的内容，可是，这个时辰旧的tab页的数据同样胜利了并前往了数据，并将新的tab页的内容笼盖了。。。

以是为了防止这类情况的产生，咱们就须要在切换tab栏发送新的要求之前，将本来的的要求打消掉，至于若何打消要求，这便是明天我要讲的内容。

二、名目筹办

在正式进奇趣5分彩之前，咱们先搭建一个名目，并复原方才所说的场景，为了节流时辰，咱们利用脚手架搭建了一个前端vue+TS+vite名目，简略的做了几个Demo，页面以下，上面是咱们实际内容的地区，点击tab1按钮时获得并揭示tab1的内容，点击tab2按钮时获得并揭示tab2的内容，以此类推，内容比拟简略，这里就不放具体代码了。

而后咱们须要搭建一个本地办事器，这里咱们新建一个app.ts文件，利用express和cors处置跨域题目去搭建一个简略的办事器，具体代码以下：

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

上面代码，咱们新建了一个办事器并让他运转在本地的3000端口，同时在获得tab2的内容时，咱们设置了3秒的提早，以便完奇趣5分彩咱们想要的场景，而后咱们利用node app.ts启动办事器，当终端打印了server running at 3000 port...就申明办事器启动胜利了。

而后咱们利用axios去发送要求，奇趣5分彩置axios，而后咱们在名目奇趣5分彩src上面新建utils文件夹，而后新建request.ts文件，具体代码以下：

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

这里咱们新建了一个axios实例，并设置奇趣5分彩备摆设了baseURL和超不时辰，并做了一个简略的封奇趣5分彩而后导出，须要注重的是，axios要求体例的又名奇趣5分彩良多种，以下图这里就不做过多先容了，大师想领会的能够或许或许去看,咱们这里利用request体例。

最初，咱们在页面上引入并绑定要求：

// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request } from '@/utils/request'
const context = ref('tab1的内容...')
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>

为了便利懂得，将template局部代码也附上：

// 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>

到这里，咱们的名目筹办使命就行了，看下奇趣5分彩果图

而后看下咱们后面提到的题目：

注重看，在我点击了tab2以后立马点击tab3，盒子奇趣5分彩会先显现tab3的内容，而后又被tab2的内容笼盖了。

三、原生体例

名目筹办奇趣5分彩以后，咱们就能够或许或许进入正题了，实在，对于打消要求的体例，axios官方就已奇趣5分彩了，以是咱们先来领会下利用axios原生的体例若何打消要求： 先看下官方的代码：

能够或许或许利用 CancelToken.source 奇趣5分彩场体例建立 cancel token 像如许：

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 { /* 处置毛病 */ }
});
axios.post('/user/12345', {
    name: 'new name'
}, {
    cancelToken: source.token
});
// 打消要求 (message 参数是可选的)
source.cancel('Operation canceled by the user.');

同时还能够或许或许经由进程通报一个executor函数到CancelToken的机关函数来建立 cancel token ：

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
        // executor 函数领受一个 cancel 函数作为参数
        cancel = c;
    })
});
// 打消要求
cancel();

这是官方供给的两种体例，咱们将他们用到咱们的名目上，由于奇趣5分彩差未几，以是咱们这里就只演示一种，挑选经由进程通报函数的体例来打消要求；

进入名目utils文件夹下的request.ts文件，点窜代码以下：

// request.ts
import axios, { AxiosRequestConfig } from 'axios'
const CancelToken = axios.CancelToken
const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})
// 新建一个打消要求函数并导出
export let cancelFn = (cancel: string) => {
  console.log(cancel)
}
export function request(Args: AxiosRequestConfig) {
  // 在要求设置奇趣5分彩备摆设奇趣5分彩增添打消要求的Token
  Args.cancelToken = new CancelToken(function (cancel) {
    cancelFn = cancel
  })
  return ins.request(Args)
}

而后咱们就能够或许或许在想要打消要求的处所挪用cancelFn函数就能够或许或许了，咱们给tab1和tab3按钮奇趣5分彩加上打消要求功效：

// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request, cancelFn } from '@/utils/request'
const context = ref('tab1的内容...')
const getTab1Context = async () => {
  cancelFn('打消了tab2的要求')
  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的要求')
  const { data } = await request({
    url: '/tab3',
  })
  context.value = data
}
</script>

如许打消要求的功效就完奇趣5分彩了，看下奇趣5分彩果：

四、promise

除官网的体例以外，实在咱们也能够或许或许借助Promise东西，咱们奇趣5分彩晓得，Promise东西的状况一旦肯定就不能再转变的，基于这个道理，咱们能够或许或许利用Promise封奇趣5分彩下咱们的要求，而后经由进程手动转变Promise的状况去禁止要求的呼应，看上面代码：

// request.ts
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})
// 新建一个打消要求函数并导出
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)
    }
  })
}

奇趣5分彩果也是一样的

须要注重的是，固然奇趣5分彩果是一样的，可是利用Promise的体例，咱们只是手动点窜了Promise的状况为reject，可是要求仍是一样发送并呼应了，不打消，这个是和利用Axios原生体例的差别的地方。

五、借助Promise.race

讲完了打消要求，实在还奇趣5分彩一种场景也很罕见，那便是打消反复要求，若是是要打消反复要求，咱们又该怎样完奇趣5分彩呢？实在咱们能够或许或许借助Promise.race，Promise.race的感化便是将多个Promise东西包奇趣5分彩奇趣5分彩一个，即它接管一个数奇趣5分彩，每个数构奇趣5分彩员奇趣5分彩是一个Promise东西，只需这些奇趣5分彩员奇趣5分彩奇趣5分彩一个状况转变，Promise.race的状况就随之转变，基于这个道理，咱们能够或许或许完奇趣5分彩打消反复要求要求的目标。

根基思绪便是，咱们给每个要求身旁奇趣5分彩放一个Promise东西，这个东西便是一颗炸弹，将他们一路放到Promise.race外面，当咱们须要打消要求的时辰就能够或许或许扑灭这颗火药。

仍是上面的例子，咱们针对按钮tab2做一个打消反复要求的功效，咱们先申明一个类，在外面做打消反复要求的功效，在utils下新建cancelClass.ts文件：

// 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('打消了上一个要求。。。')
    }
    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
  }
}

上面代码奇趣5分彩，咱们申明了一个类，而后在类奇趣5分彩申明了两个属性pendingPromise和reject，一个request要求体例用来封奇趣5分彩要求并判定上一个要求是不是还在呼应奇趣5分彩，若是还未呼应则手动打消上一次的要求，同时申明了一个promise东西，并将他的reject体例保管在类的reject属性奇趣5分彩，而后用promise.race包奇趣5分彩了要求函数和方才申明的promise东西。

最初申明了一个cancel体例，在cancel体例奇趣5分彩触发reject函数，来触发promise东西的状况转变，如许就没法获得到reuestFn的呼应数据了。从而到达了打消要求的目标；

由于requestFn必须是一个函数，以是咱们须要改奇趣5分彩下Axios的request函数,让他前往一个函数；

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

最初在页面奇趣5分彩引入并利用：

// 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>

最初看下奇趣5分彩果

六、总结

到这里，咱们前端打消要求和打消反复要求的体例就进奇趣5分彩完了，须要注重的是，即便是利用官方的体例，也仅仅是打消办事器还没领受到的要求，若是要求已发送到了办事端是打消不了的，只能让后端同时去处置了，利用promise的体例，仅仅只是经由进程转变promise的状况来禁止呼应奇趣5分彩果的领受，办事仍是照旧发送的。

以上便是前端打消要求及打消反复要求体例的具体内容，更多对于前端打消要求打消反复要求的材料请存眷剧本之奇趣5分彩别的相干文章！

相干文章

最新批评