在JavaScript中需要按顺序调用多个API，一个接一个地调用。

Question

我需要在JavaScript中按顺序依次调用多个API，其中一个的响应可能需要作为另一个的输入。有人能否提供建议或示例代码。

我尝试使用 .fetch() API，但发现很难将一个API的响应传递给另一个API。

- Hari

Answer 1

利用由fetch API本身返回的promises，可以将多个请求连接在一起。

var result = fetch('api/url1') // First request
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        var secondId = data.someId
        return fetch('api/url2' + secondId); // Second request
    })
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        var thirdId = data.someId
        return fetch('api/url3' + thirdId); // Third request
    })
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        // Response of third API
    })
    .catch(function (error) {
        console.log('Error', error)
    })

- Prakhar

---

一个异步的fetchJson辅助函数，既可以获取数据，又可以等待结果的.json()转换，将有助于简化代码。 - Wyck

如果一个API失败，其他API也会失败，那么如何处理这种情况？ - mayur singhal

Answer 2

虽然已经接受了答案，但请尝试使用以下的async和await来改进代码。

(async () => {
  // first
  const res = await fetch("https://reqres.in/api/users/1");
  const result1 = await res.json();
  
  console.log("Result 1", result1);
  
  // some logic ...
  
  // second 
  const res2 = await fetch("https://reqres.in/api/users/2");
  const result2 = await res2.json();
  
  console.log("Result 2", result2);
  // ... so on ...
})();

- Kharel