取消Promise請求

取消結束Promise的方法？

1. 返回一個pending狀態的Promise，原Promise鏈會終止

Promise.resolve().then(() => {
    console.log('ok1')
    return new Promise(()=>{})  // 返回“pending”狀態的Promise對象
}).then(() => {
    // 后續的函數不會被調用
    console.log('ok2')
}).catch(err => {
    console.log('err->', err)
})

2. Promise.race競速方法

let p1 = new Promise((resolve, reject) => {
    resolve('ok1')
})
 
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {resolve('ok2')}, 10)
})
 
Promise.race([p2, p1]).then((result) => {
    console.log(result) //ok1
}).catch((error) => {
    console.log(error)
})

3. 當Promise鏈中拋出錯誤時，錯誤信息沿着鏈路向后傳遞，直至捕獲

Promise.resolve().then(() => {
    console.log('ok1')
    throw 'throw error1'
}).then(() => {
    console.log('ok2')
}, err => {     
    // 捕獲錯誤
    console.log('err->', err)
}).then(() => {   
    // 該函數將被調用
    console.log('ok3')
    throw 'throw error3'
}).then(() => {
    // 錯誤捕獲前的函數不會被調用
    console.log('ok4')
}).catch(err => {
    console.log('err->', err)

摘抄

• 取消promise的三種方法

Axios如何取消請求？

• axios文檔

第一種通過CancelToken.source工廠方法創建cancel token

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});

// 取消請求（message 參數是可選的）
source.cancel('Operation canceled by the user.');

第二種通過傳遞executor函數到CancelToken的構造函數來創建cancel token

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函數接收一個 cancel 函數作為參數
    cancel = c;
  })
});

// 取消請求
cancel();