axios 主動取消請求

2021-10-02 13:49:56 字數 1817 閱讀 8508

已經傳送的請求,在沒有收到後台返回之前主動取消。這樣的場景很常用。例如:乙個支付元件,正在支付的時候使用者立即又關閉了元件,這時應該立即取消支付請求。又或者tabs切換的時候,都是經常用到的。

這裡我是用typescript來封裝的乙個簡單的axios請求做演示。

api.js

import axios,

from

'axios'

export

default

class

publicapi

)public

fetch

(url: string, data?

: any, baseurl?

: string, option: object =

): promise/$

` : tempurl

return

this

.request.

get(url,)}

public

post

(url: string, params?

: any, baseurl?

: string, option: object =

): promise/$

` : tempurl

return

this

.request.

post

(url, params,)}

}

使用:*.vue

"axios-cancel-request"

>

"fetchtodo"

:loading=

"loading"

>開始請求<

/v-button>

<

/div>

<

/template>

"ts"

>

import axios from

'axios'

import publicapi from

'@/api'

import

from

'vue-property-decorator'

@component

export

default

class

axioscancelrequest

extends

vue,

800)

let self =

this

this

.loading =

true

const publicapi =

newpublicapi()

const result =

await publicapi.

fetch

('/todo'

,null,''

,)})

.catch

((error)

=>

)this

.loading =

false

result && console.

log(result);}

private

cancelreqtodo

(message: string)

}public

mounted()

}<

/script>

axios還提供了靜態的source方式取消全部請求

傳送門

axios取消請求

let btns document.getelementsbytagname btn let cancel null btns 0 onclick function axios then response axios.get adata then ret query方式傳參和接收引數 傳參 this...

Axios取消請求ajax請求

使用者需要快速請求,比如搶購,前一次的請求資料是毫無意義的,直接取消就完事了 快速切換tab等操作選單後,如果前一次請求比後一次請求響應慢,資料就會對不上 index.js 如果前一次請求還未響應,先取消 this cancel this cancel message this axios main...

axios 路由跳轉取消請求

1.store 1 state const state 2 mutation types export const axios push token axios push token 新增新的axios請求 export const axios clear token axios clear tok...