Question

如何使用Promise.all获取api json数据？如果我不使用Promise.all，将其拉出效果很好。使用.all时，它实际上会在控制台中返回查询的值，但是由于某些原因，我无法访问它。这是我的代码，以及代码解析后在控制台中的外观。

Promise.all([
    fetch('data.cfc?method=qry1', {
        method: 'post',
        credentials: "same-origin", 
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: $.param(myparams0)
    }),
    fetch('data.cfc?method=qry2', {
        method: 'post',
        credentials: "same-origin", 
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: $.param(myparams0)
    })
]).then(([aa, bb]) => {
    $body.removeClass('loading');
    console.log(aa);
    return [aa.json(),bb.json()]
})
.then(function(responseText){
    console.log(responseText[0]);

}).catch((err) => {
    console.log(err);
});

我想要的是能够访问data.qry1。我尝试使用responseText [0] .data.qry1或responseText [0] ['data'] ['qry1']，但返回未定义。以下是console.log responseText [0]的输出。 console.log（aa）给出Response {type：“ basic” ...

    Promise {<resolved>: {…}}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Object
data: {qry1: Array(35)}
errors: []

Answer 1

最简单的解决方案是重复使用Promise.all，以等待所有.json（）解析。只需使用

Promise.all([fetch1, ... fetchX])
.then(result => Promise.all(result.map(v => v.json()))
.then(result => {... result[0, ...X] available as objects})

Answer 2

在解决之前，显然返回了aa.json()和bb.json()，向其中添加async/await将解决问题：

.then(async([aa, bb]) => {
    const a = await aa.json();
    const b = await bb.json();
    return [a, b]
  })

Promise.all([
    fetch('https://jsonplaceholder.typicode.com/todos/1'),
    fetch('https://jsonplaceholder.typicode.com/todos/2')
  ]).then(async([aa, bb]) => {
    const a = await aa.json();
    const b = await bb.json();
    return [a, b]
  })
  .then((responseText) => {
    console.log(responseText);

  }).catch((err) => {
    console.log(err);
  });

虽然仍在寻找更好的解释

Answer 3

使用?代替return [aa.json(),bb.json()]。请参阅Promise.resolve() 上的文档。

Answer 4

使用Promise.all来获取每个API的json响应-

代码：

Promise.all([
  API_1_Promise,
  API_2_Promise,
  API_3_Promise])
  .then(allResults => console.log(allResults))
  .catch(err => console.log(err))

其中API_1_Promise,API_2_Promise,API_3_Promise被定义为

API_1_Promise = fetch(`API_URL_1`, {  *Add required headers* }).then(response => response.json())

API_2_Promise = fetch(`API_URL_2`, {  *Add required headers* }).then(response => response.json())

API_3_Promise = fetch(`API_URL_3`, { *Add required headers* }).then(response => response.json())

响应：这将打印所有API调用的响应数组在控制台中->

[JSON_RESPONSE_API1, JSON_RESPONSE_API2, JSON_RESPONSE_API3]

Answer 5

您可以将number放在Promise的前面，而不必等待每个单独的提取

await

希望这会有所帮助

Answer 6

我遇到了同样的问题，我的目标是让 Promise.all() 返回一个 array of JSON objects。

let jsonArray = await Promise.all(requests.map(url => fetch(url)))
    .then(async (res) => {
        return Promise.all(
            res.map(async (data) => await data.json())
        )
    })

如果你需要它很短（复制粘贴人的一个衬垫:)

const requests = ['myapi.com/list','myapi.com/trending']
const x = await Promise.all(requests.map(url=>fetch(url))).then(async(res)=>Promise.all(res.map(async(data)=>await data.json())))

如何返回Promise.all获取api json数据？

6 个答案: