用 Axios 承诺一切

Posted 2023-03-07

【中文标题】用 Axios 承诺一切

【英文标题】：Promise All with Axios

【发布时间】：2019-03-11 04:42:27

【问题描述】：

我刚看了一篇与 promise 相关的文章，无法理解我们如何通过 Promise.all 使用 Axios 进行多个 API 调用

所以考虑有 3 个 URL，让我们这样称呼它

let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com"
let URL3 = "https://www.something2.com"

还有一个我们将在其中存储值的数组

  let promiseArray = []

现在，我想并行运行它 (Promise.all)，但我无法弄清楚我们将如何做？因为 axios 本身就有一个 promise（或者至少我是这样使用它的）。

axios.get(URL).then((response) => 
).catch((error) => 
)

问题：谁能告诉我我们如何使用 promise.all 和 axios 发送多个请求

【问题讨论】：

***.com/questions/37149466/… 似乎与您的问题相似

【参考方案1】：

axios.get() 方法将返回一个承诺。

Promise.all() 需要一系列承诺。例如：

Promise.all([promise1, promise2, promise3])

那么……

let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com"
let URL3 = "https://www.something2.com"

const promise1 = axios.get(URL1);
const promise2 = axios.get(URL2);
const promise3 = axios.get(URL3);

Promise.all([promise1, promise2, promise3]).then(function(values) 
  console.log(values);
);

您可能想知道Promise.all() 的响应值是什么样的。那么，您可以通过快速查看以下示例轻松地自己弄清楚：

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) 
  setTimeout(resolve, 100, 'foo');
);

Promise.all([promise1, promise2, promise3]).then(function(values) 
  console.log(values);
);
// expected output: Array [3, 42, "foo"]

欲了解更多信息：https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Promise/all

【讨论】：

你可能想补充一点，即使一个失败，一切都会失败。

@RutwickGangurde 不是这种形式 ***.com/a/46086037/5871613 任务的处理顺序不是我假设同时执行的顺序

【参考方案2】：

fetchData(URL) 函数发出网络请求并返回具有待处理状态的 Promise 对象。

Promise.all 将等到所有承诺都解决或任何承诺被拒绝。它返回一个承诺并通过响应数组解析。

let URLs= ["https://jsonplaceholder.typicode.com/posts/1", "https://jsonplaceholder.typicode.com/posts/2", "https://jsonplaceholder.typicode.com/posts/3"]

function getAllData(URLs)
  return Promise.all(URLs.map(fetchData));


function fetchData(URL) 
  return axios
    .get(URL)
    .then(function(response) 
      return 
        success: true,
        data: response.data
      ;
    )
    .catch(function(error) 
      return  success: false ;
    );


getAllData(URLs).then(resp=>console.log(resp)).catch(e=>console.log(e))

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

【讨论】：

对代码的解释将有助于更好地回答

【参考方案3】：

您仍然可以使用 promise.all 和传递给它的一系列承诺，然后等待它们全部解决或其中一个被拒绝。

let URL1 = "https://www.something.com";
let URL2 = "https://www.something1.com";
let URL3 = "https://www.something2.com";


const fetchURL = (url) => axios.get(url);

const promiseArray = [URL1, URL2, URL3].map(fetchURL);

Promise.all(promiseArray)
.then((data) => 
  data[0]; // first promise resolved 
  data[1];// second promise resolved 
)
.catch((err) => 
);

【参考方案4】：

只是为了添加到已批准的答案中，axios 还具有 Promise.all 的 axios.all 形式，它需要一个承诺列表并返回一个响应数组。

let randomPromise = Promise.resolve(200);
axios.all([
    axios.get('http://some_url'),
    axios.get('http://another_url'),
    randomPromise
  ])
  .then((responses)=>
    console.log(responses)
  )

【讨论】：

如何在里面添加auth header？

看看这个axios with headers

axios.all 目前已被文档弃用

axios.all 在 2017 年被删除，使用 Promise.all 代替。 github.com/axios/axios/issues/1042

【参考方案5】：

希望对你有帮助

var axios = require('axios');
var url1 = axios.get('https://www.something.com').then(function(response)
    console.log(response.data)
  )
var url2 = axios.get('https://www.something2.com').then(function(response)
    console.log(response.data)
  )
var url3 = axios.get('https://www.something3.com').then(function(response)
    console.log(response.data)
  )

Promise.all([url1, url2, url3]).then(function(values)
  return values
).catch(function(err)
  console.log(err);
)

【讨论】：

相似代码在接受的答案中（在axios.get 和catch 块之后没有then）

同意@barbsan 分别解决每个承诺不是正确的处理方式。 Promise.all 有效地将一堆未解决的承诺捆绑成一个未解决的承诺，该承诺将解决一系列结果。接受的答案是正确的。

Trouble106 这似乎不是一个正确的答案，您的个人获取请求，promise.all 在您的情况下不是必需的。

【参考方案6】：

这样的事情应该可以工作：

const axios = require('axios');
function makeRequestsFromArray(arr) 
    let index = 0;
    function request() 
        return axios.get('http://localhost:3000/api/' + index).then(() => 
            index++;
            if (index >= arr.length) 
                return 'done'
            
            return request();
        );

    
    return request();


makeRequestsFromArray([0, 1, 2]);