奇趣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文件,利用expresscors处置跨域题目去搭建一个简略的办事器,具体代码以下:

// 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函数就能够或许或许了,咱们给tab1tab3按钮奇趣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.racePromise.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分彩申明了两个属性pendingPromisereject,一个request要求体例用来封奇趣5分彩要求并判定上一个要求是不是还在呼应奇趣5分彩,若是还未呼应则手动打消上一次的要求,同时申明了一个promise东西,并将他的reject体例保管在类的reject属性奇趣5分彩,而后用promise.race包奇趣5分彩了要求函数和方才申明的promise东西。

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

由于requestFn必须是一个函数,以是咱们须要改奇趣5分彩下Axiosrequest函数,让他前往一个函数;

// 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分彩别的相干文章!

相干文章

最新批评