如何在回調函數中取消待處理的承諾調用？

Question

fetch(
  "https://rqyhfmwv4b.execute-api.us-east-1.amazonaws.com/production/join-meeting",
  requestOptions
).then((response) => response.json())
.then(async (data) => {
  // You need responses from server-side Chime API. See below for details.
  const meetingResponse =
  data.result
  .meetingResponsee; /* The response from the CreateMeeting API action */
  const attendeeResponse =
  data.result
  .attendeeResponsee; /* The response from the CreateAttendee or BatchCreateAttendee API action */
  const configuration = new MeetingSessionConfiguration(
    meetingResponse,
    attendeeResponse
  );
  
  // In the usage examples below, you will use this meetingSession object.
  const meetingSession = new DefaultMeetingSession(
    configuration,
    logger,
    deviceController
  );
  
  const meetingReadinessChecker = new DefaultMeetingReadinessChecker(
    logger,
    meetingSession
  );
  
  // testing
  
  if (pauseReadinessTest) {
    setPauseReadinessTest(false);
    return;
  }
  
  if (testParam == "All" && disableStartRedinessTest !== true) {
    await audioTest(deviceController);
    setMeetingTestProgress(15);
    await micTest(meetingSession, meetingReadinessChecker, CheckAudioInputFeedback);
    setMeetingTestProgress(25);
    await videoTest(meetingSession, meetingReadinessChecker, CheckVideoInputFeedback);
    await cameraTest(meetingSession, meetingReadinessChecker, CheckCameraResolutionFeedback);
    setMeetingTestProgress(50);
    await networkTest(meetingReadinessChecker, CheckNetworkTCPConnectivityFeedback, CheckNetworkUDPConnectivityFeedback);
    setMeetingTestProgress(75);
    await streamTest(meetingSession, meetingReadinessChecker, CheckAudioConnectivityFeedback, CheckVideoConnectivityFeedback);
    setMeetingTestProgress(85);
    await screenShareTest(meetingSession, meetingReadinessChecker, CheckContentShareConnectivityFeedback);
    setMeetingTestProgress(100);
    setRefreshIconClass(" ");
    SetDisableStartRedinessTest(false);
    setIsResult("result");
}

我有這段代碼，如果用戶想要退出測試，我想取消掛起的等待函數調用。 但問題是，每當變量的值被更新時，它都不會反映在導致主要問題的塊內。

Answer 1

據我所知，promise 概念主要是一種語法糖。 現實世界中會發生什么 - 您在函數調用 (A) 中傳遞一個回調函數 (B)，並且在某個時刻函數 A 將調用函數 B。如果您在編寫函數 A 時沒有考慮到取消概念，則有沒有辦法取消通話。 更容易使用其他方法（全局變量、額外傳遞的對象參數等）來設置標志“不運行”並在函數 B 中檢查它。

Answer 2

你可以這樣做：

const promises = [{
    functionCall: () => audioTest(deviceController), 
    progress: 15,
}, {
    functionCall: await micTest(meetingSession, meetingReadinessChecker, CheckAudioInputFeedback),
    progress: 25,
    }, // ...etc.
];

while (testParam == "All" && disableStartRedinessTest !== true && promises.length) {
    const { functionCall, progress } = promises.unshift();
    await functionCall.call();
    setMeetingTestProgress(progress);
}

雖然如果你正在考慮取消操作，我會使用 RxJS 而不是 vanilla Promise。

Answer 3

如果您在回調函數中有待處理的承諾，您可以使用 Promise.prototype.cancel() 方法取消它。 例如：

var promise = new Promise(function(resolve, reject) {
  // do something

  if (/* some condition */) {
    resolve(); // or reject(), depending on your needs
  } else {
    promise.cancel(); // this will cancel the pending promise and prevent it from being resolved or rejected
  }
});

Answer 4

你可以試試我的 lib 來解決這個問題，你只需要使用生成器而不是 async 函數，然后用promisify方法包裝它。

在線玩

import { CPromise } from "c-promise2";
import cpAxios from "cp-axios";

// ################# Dummy subtasks #####################

const fakeAsyncTask = (name) =>
  new Promise((resolve) => setTimeout(resolve, 2500, name));

const fakeAsyncTaskCancelable = (name) =>
  new CPromise((resolve, reject, { onCancel }) => {
    const timer = setTimeout(resolve, 2500, name);
    onCancel(() => {
      console.log(`Task [${name}] onCancel handler`);
      clearTimeout(timer);
    });
  });

// ####### Make a cancellable async function from a generator ############

const task = CPromise.promisify(function* () {
  console.log("started");

  this.innerWeight(4); // how many steps are expected here (yields)

  const { data } = yield cpAxios.get(
    "https://run.mocky.io/v3/7b038025-fc5f-4564-90eb-4373f0721822?mocky-delay=2s"
  );

  console.log("Data:", data);

  yield fakeAsyncTask("foo");

  console.log("task 1 done");

  yield fakeAsyncTaskCancelable("bar");

  console.log("task 2 done");

  yield fakeAsyncTask("baz");

  console.log("task 3 done");

  return "It works!";
});

let promise;

const run = () => {
  cancel();
  promise = task("foo")
    .progress((p) => console.log(`Progress: ${p}`))
    .then((result) => console.log(`Done: ${result}`));
};

const cancel = () => promise?.cancel("Ooops!");

document.querySelector("#btn-run").onclick = run;

document.querySelector("#btn-cancel").onclick = cancel;

如果要在 useEffect 中調用任務，可以嘗試另一個 my library：

現場演示

import React, { useState } from "react";
import { useAsyncEffect } from "use-async-effect2";
import cpAxios from "cp-axios";
import { ProgressBar } from "react-bootstrap";
import { fakeAsyncTask, fakeAsyncTaskCancelable } from "./tasks.js";

function TestComponent(props) {
  const [text, setText] = useState("");
  const [progress, setProgress] = useState(0);
  const [cancel, done, result, err] = useAsyncEffect(
    function* () {
      console.log("started");

      this.progress(setProgress);

      this.innerWeight(4); // how many steps are expected here (yields)

      const { data } = yield cpAxios.get(
        "https://run.mocky.io/v3/7b038025-fc5f-4564-90eb-4373f0721822?mocky-delay=2s"
      );

      console.log(data);

      setText("Request done");

      yield fakeAsyncTask("foo");

      setText("Task foo done");

      yield fakeAsyncTaskCancelable("bar");

      setText("Task bar done");

      yield fakeAsyncTask("baz");

      setText("Task baz done");

      return "It works!";
    },
    { states: true, deps: [props.url] }
  );

  return (
      // ...
      <ProgressBar animated now={progress * 100} label={text} />
      // ...
      <button onClick={cancel} disabled={done}>
        Cancel async effect
      </button>
  );
}

export default TestComponent;