axios 失败时中止所有请求

Question

我有一排多个待处理的请求

const requests = [];

requests.push(axios.post('/request1', {moo:1});
requests.push(axios.post('/request2', {moo:2});
requests.push(axios.post('/request3', {moo:3});

Promise.all(requests).then((reponse) => {
    debugger;
}).catch((err) => {
    debugger;
});

如果其中一个失败，我将尝试中止所有。不幸的是，目前如果一个失败了，下一个请求仍然会被提出。

我已经尝试了一些取消代码，但下一个请求仍然会触发

const requests = [];
const source = axios.CancelToken.source();
const cancelToken = source.token;

requests.push(axios.post('/request1', {moo:1}, {cancelToken} );
requests.push(axios.post('/request2', {moo:2}, {cancelToken} );
requests.push(axios.post('/request3', {moo:3}, {cancelToken} );

Promise.all(requests).then((reponse) => {
    debugger;
}).catch((err) => {
    source.cancel("Request canceled");
    debugger;
});

Answer 1

I've tried some cancellation code but the next request still triggers

您正在开始此处的请求（如果我假设每行结束 )）：

requests.push(axios.post('/request1', {moo:1}, {cancelToken} ));
requests.push(axios.post('/request2', {moo:2}, {cancelToken} ));
requests.push(axios.post('/request3', {moo:3}, {cancelToken} ));

此时，请求正在进行中。 Promise.all 没有运行任何东西，它观察已经的东西] 运行宁.

您使用取消令牌的代码将在您根据 Promise.all 的承诺运行拥有的拒绝处理程序时尽可能取消请求，但除非您运行您的请求在系列（一次一个），他们都会在那之前开始。

如果您想按顺序进行，最简单的方法是使用 async 函数：

async function postInSeries(iterable) {
    // Does the requests in series
    const results = [];
    for (const request of iterable) {
        results.push(await axios.post(...request));
    }
    return results;
}
// ...
postInSeries([
    ['/request1', {moo:1}],
    ['/request2', {moo:2}],
    ['/request3', {moo:3}],
])
.then(results => {
    // ...use the results...
})
.catch(error => {
    // ...handle/report error...
});

Answer 2

使用自定义库，您可以执行以下操作 (Live Demo)：

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

(async (urls) => {
  try {
    const responses = await CPromise.all(
      function* () {
        for (const url of urls) {
          yield CPAxios(url);
        }
      },
      { concurrency: 3 } // optionally
    );
    console.log(responses);
  } catch (err) {
    console.warn(`Fail: ${err}`);
  }
})([
  "https://rickandmortyapi.com/api/character/1",
  "https://rickandmortyapi.com/api/character/2",
  "https://rickandmortyapi.com/api/character/3",
  "https://rickandmortyapi.com/api/character/4",
  "https://rickandmortyapi.com/api/character/5",
  "https://rickandmortyapi.com/api/character/BadID",
  "https://rickandmortyapi.com/api/character/7",
  "https://rickandmortyapi.com/api/character/8"
]);

或使用映射函数 (Live Demo):

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

(async (urls) => {
  try {
    const responses = await CPromise.all(urls, {
      mapper(url) {
        return CPAxios(url);
      },
      concurrency: 3
    });
    console.log(responses);
  } catch (err) {
    console.warn(`Fail: ${err}`);
  }
})([
  "https://rickandmortyapi.com/api/character/1",
  "https://rickandmortyapi.com/api/character/2",
  "https://rickandmortyapi.com/api/character/3",
  "https://rickandmortyapi.com/api/character/4",
  "https://rickandmortyapi.com/api/character/5",
  "https://rickandmortyapi.com/api/character/BadID",
  "https://rickandmortyapi.com/api/character/7",
  "https://rickandmortyapi.com/api/character/8"
]);

axios 失败时中止所有请求

axios abort all request when one fails

javascript

ajax

promise

cancellation

axios