欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

取消正在運行的Promise技巧詳解

 更新時間:2022年06月08日 15:29:02   作者:杰出D  
這篇文章主要為大家介紹了取消正在運行的Promise技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

前言

最近項目當中小伙伴遇到一個很奇怪的bug,進入一個頁面后,快速切換到其它頁面,會跳轉到403頁面。經過一段時間和小伙伴的排查,發(fā)現那個頁面有個接口請求響應時間比較長,請求后還有一些業(yè)務處理。

等我們切換到其它頁面,這個請求完成后還會處理剩下的業(yè)務,導致出錯。

代碼案例

項目當中有很多業(yè)務,我們用一些簡單代碼復現下這個問題。

import React, { useEffect } from 'react';
import { history } from 'umi';
const Test = props => {
  useEffect(() => {
    new Promise((resolve, reject) => {
        // 模擬接口請求時間
        setTimeout(() => {
            resolve()
        }, 4000);
    }).then(res => {
        return new Promise((resolve1) => {
             // 模擬接口請求時間
            setTimeout(() => {
                resolve1()
            }, 1000);
        })
    }).then(() => {
        // Promise 執(zhí)行完后頁面跳轉
        history.push('/test1')
    })
  }, []);
  const go = () => {
    history.push('/user/login')
  }
  return (
    <div>
      <button onClick={go}>go to</button>
      Test
    </div>
  );
}
export default Test;

我們進入Test組件后,馬上點擊go to按鈕,幾秒之后頁面還會跳轉到test1頁面。

經分析,我們應該在離開的時候要取消請求和取消Promise讓后續(xù)的業(yè)務代碼不在執(zhí)行,取消請求比較簡單,一般的庫都支持,我們來說下怎么取消Promise.

CancelablePromise (取消Promise)

我們知道Promise是沒有提供取消或者終止的操作。但我們在開發(fā)過程中會遇到。我們可以參考和借助AbortController來實現。

class CancelablePromise<T> {
  /**
   * 構造器
   * @param executor Promise中的 executor
   * @param abortSignal AbortController中的signal對象
   * @returns 
   */
  constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void, abortSignal: AbortSignal) {
    // 記錄reject和resolve方法
    let _reject: any = null;
    let _resolve: any = null;
    let _isExecResolve = false;
    // 創(chuàng)建和執(zhí)行Promise
    const cancelablePromise = new Promise<T>((resolve, reject) => {
      _reject = reject;
      _resolve = (value: T) => {
        _isExecResolve = true;
        resolve(value);
      };
      return executor(_resolve, reject);
    });
    // 監(jiān)聽Signal的abourt事件
    abortSignal.addEventListener('abort', () => {
      if (_isExecResolve) {
        return;
      }
      // 拋出錯誤
      const error = new DOMException('user cancel promise', CancelablePromise.CancelExceptionName );
      _reject( error );
    } );
    return cancelablePromise;
  }
  // 取消后拋出的異常名稱
  static CancelExceptionName = 'CancelablePromise AbortError';
}
export default CancelablePromise;

使用

下面我們該造下之前的代碼,用我們封裝的CancelablePromise,可以讓Promise可取消。

多個Promise鏈式調用

import React, { useEffect } from 'react';
import { history } from 'umi';
import CancelablePromise from '../utils/CancelablePromise';
const Test = props => {
  useEffect(() => {
   let abortController = new AbortController();
    new CancelablePromise((resolve, reject) => {
        // 模擬接口請求時間
        setTimeout(() => {
            resolve()
        }, 4000);
    }, abortController.signal).then(res => {
        return new CancelablePromise((resolve1) => {
             // 模擬接口請求時間
            setTimeout(() => {
                resolve1()
            }, 1000);
        }, abortController.signal)
    }).then(() => {
        // Promise 執(zhí)行完后頁面跳轉
        history.push('/test1')
    })
    return () => {
        // 取消請求
        abortController.abort();
    }
  }, []);
  const go = () => {
    history.push('/user/login')
  }
  return (
    <div>
      <button onClick={go}>go to</button>
      Test
    </div>
  );
}
export default Test;

在async和await中使用

import React, { useEffect } from 'react';
import { history } from 'umi';
import CancelablePromise from '../utils/CancelablePromise';
const Test = props => {
  useEffect(() => {
      let abortController = new AbortController();
     const exec = async function () {
      try {
        await new CancelablePromise((resolve) => {
          setTimeout(() => {resolve();}, 5000);
        }, abortController.signal, 'one')
        await new CancelablePromise((resolve1) => {
          setTimeout(() => {resolve1();}, 5000);
        }, abortController.signal, 'del')
        history.push('/test')
      } catch (error) {
        // 取消之后會拋出異常
        if (CancelablePromise.CancelExceptionName === error.name) {
          console.log('promise 終止了。。。')
        }
      }
    }
    exec();
    return () => {
        // 取消請求
        abortController.abort();
    }
  }, []);
}

Promise取消之后會拋出異常,如果需要在拋出異常之后做處理,可以通關對應的異常名稱做判斷。

if (CancelablePromise.CancelExceptionName === error.name) {
  console.log('promise 終止了。。。')
}

結束語

Promise的取消在業(yè)務當中用到的地方比較多,更多關于Promise運行取消的資料請關注腳本之家其它相關文章!

相關文章

  • react?中?mobx的使用案例詳解

    react?中?mobx的使用案例詳解

    這篇文章主要介紹了react?中?mobx的使用案例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • 淺談react新舊生命周期鉤子

    淺談react新舊生命周期鉤子

    所謂的生命周期就是指某個事物從開始到結束的各個階段,本文主要介紹了淺談react新舊生命周期鉤子,具有一定的參考價值,感興趣的可以了解一下
    2023-12-12
  • react項目中如何引入國際化

    react項目中如何引入國際化

    在React項目中引入國際化可以使用第三方庫來實現,本文主要介紹了react項目中如何引入國際化,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-07-07
  • React實現導入導出Excel文件

    React實現導入導出Excel文件

    本文主要介紹了React實現導入導出Excel文件,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧
    2021-07-07
  • 關于React動態(tài)修改元素樣式的三種方式

    關于React動態(tài)修改元素樣式的三種方式

    這篇文章主要介紹了關于React動態(tài)修改元素樣式的三種方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React Native自定義組件與輸出方法詳解

    React Native自定義組件與輸出方法詳解

    這篇文章主要給大家介紹了關于React Native自定義組件與輸出方法的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2018-07-07
  • 探討JWT身份校驗與React-router無縫集成

    探討JWT身份校驗與React-router無縫集成

    這篇文章主要為大家介紹了JWT身份校驗與React-router無縫集成的探討解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • react實現todolist的增刪改查詳解

    react實現todolist的增刪改查詳解

    這篇文章主要為大家介紹了react實現todolist的增刪改查,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12
  • react中的useContext具體實現

    react中的useContext具體實現

    useContext是React提供的一個鉤子函數,用于在函數組件中訪問和使用Context,useContext的實現原理涉及React內部的機制,本文給大家介紹react中的useContext具體實現,感興趣的朋友一起看看吧
    2023-11-11
  • react-native封裝插件swiper的使用方法

    react-native封裝插件swiper的使用方法

    這篇文章主要介紹了react-native封裝插件swiper的使用方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03

最新評論