使用 axios 的动态、多次 API 调用

Question

我正在尝试从 API 服务器获取数据。

  async function fetchData() {
  const results = await axios(`/api/autotask/config-items/${props.accountID}`);

  const contracts = results.data.map(t => axios(`/api/autotask/contract/${t.contractID}`).catch(err => err))
  const products = results.data.map(l => axios(`/api/autotask/product/${l.productID}`).catch(err => err))
  const subscriptions = results.data.map(s => axios(`/api/autotask/subscription/${s.id}`).catch(err => err))

  Promise.all([[...contracts], [...products], [...subscriptions]])
    .then(response => {
      console.log(response)

    })
}

这将首先获取基于 accountID 的项目列表。每个项目都有 contractID、productID 和 id。这些被传递给其他 3 个 Axios GET 调用（合同、产品、订阅）

到目前为止这是有效的，但是当我使用 Promise.all 时，我将得到 3 个数组，其中包含更多的承诺而不是实际解析的数据。

(3) [Array(7), Array(7), Array(7)]
0: (7) [Promise, Promise, Promise, Promise, Promise, Promise, Promise]
  0: Promise {<fulfilled>: {…}}
  1: Promise {<pending>}
  2: Promise {<pending>}
  3: Promise {<pending>}
  4: Promise {<fulfilled>: {…}}
  5: Promise {<pending>}
  6: Promise {<pending>}
  length: 7
  __proto__: Array(0)
1: (7) [Promise, Promise, Promise, Promise, Promise, Promise, Promise]
2: (7) [Promise, Promise, Promise, Promise, Promise, Promise, Promise]
  length: 3
  __proto__: Array(0)

有了这个，我可以访问 response[0]、response[1] 或 response[2]，但它只会再次承诺。当我尝试传播每个数组 Promise.all([**...[...contracts]**, [...products], [...subscriptions]]) 时，它会传播它，我得到了数据，但将无法再通过数组访问它。希望这是有道理的。基本上我想从中得到的是包含来自 API 的数据的单个数组。过去两天我一直在寻找这个，但我哪儿也不去。我看了很多视频和文章，但仍然没有多大意义。我确信我做错了什么，甚至可能采取了完全错误的方法。获得一些见解和一点帮助会很棒。谢谢

Answer 1

我们可以在这里对每个项目使用 await 和 Promise.all，例如合同、产品、订阅，使用一点 de-structuring 从每个响应中提取数据属性。

执行此操作时，我们将获得每个项目类型的 axios 响应列表，因此我们只需要挑选出数据。

async function fetchData() {
    try {
        const results = await axios(`/api/autotask/config-items/${props.accountID}`);
    
        // This will get a list of axios responses for each item, e.g. { data: [1,2,3] .... }; Use { data } => destructing to get data.
        const contracts = await Promise.all(results.data.map(t => axios(`/api/autotask/contract/${t.contractID}`).then( ({data}) => data) ));
        const products = await Promise.all(results.data.map(l => axios(`/api/autotask/product/${l.productID}`).then( ({data}) => data) ));
        const subscriptions = await Promise.all(results.data.map(s => axios(`/api/autotask/subscription/${s.id}`).then( ({data}) => data) ));

        console.log("Result:", { contracts, products, subscriptions } );
    } catch (error) {
        // We need to make sure we log any error..
        console.log("fetchData: an error occurred:", error);
    }
}

还有一个片段（使用模拟数据）：

// Mock out axios for demo purposes
async function axios(input) {
    if (input.includes('config-items')) {
        return { data: [1,2,3,4,5].map(n => { return { id: n, contractID: n, productID: n }}) } ;
    } else { 
        return { data: { type: input.split("/")[3] } };
    }
}

let props = { accountID: 'accountID' };

async function fetchData() {
    try {
        const results = await axios(`/api/autotask/config-items/${props.accountID}`);
    
        // This will get a list of axios responses for each item, e.g. { data: [1,2,3] .... };
        const contracts = await Promise.all(results.data.map(t => axios(`/api/autotask/contract/${t.contractID}`).then( ({data}) => data) ));
        const products = await Promise.all(results.data.map(l => axios(`/api/autotask/product/${l.productID}`).then( ({data}) => data) ));
        const subscriptions = await Promise.all(results.data.map(s => axios(`/api/autotask/subscription/${s.id}`).then( ({data}) => data) ));

        console.log("Result:", { contracts, products, subscriptions } );
    } catch (error) {
        // We need to make sure we log any error..
        console.log("fetchData: an error occurred:", error);
    }
}

fetchData();

使用 axios 的动态、多次 API 调用

Dynamic, multiple API calls using axios

javascript

ecmascript-6

es6-promise

axios