已經傳送的請求,在沒有收到後台返回之前主動取消。這樣的場景很常用。例如:乙個支付元件,正在支付的時候使用者立即又關閉了元件,這時應該立即取消支付請求。又或者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...