为什么要获取回报未决承诺？

Question

我正在使用访存来获取数据，但它会继续返回promise为待处理状态。我看过很多有关此问题的文章，并尝试了所有可能的方法，但没有解决我的问题。我想知道为什么取回简短地将诺言作为待处理状态？

我的代码片段供参考：

class Component extends React.Component{
    async handleOperation = param =>{
        const result = await apiCall(param)
    }

    render(){
        return <Child callback={this.handleOperation} />
    }
}

Answer 1

fetch()是一项网络操作。为了避免挂起，直到我们收到网络的答复，我们将其推迟到后台，并向我们保证最终会完成。

所以fetch(url).then((data) => data.json())意味着我们获取url，等待数据进入，获取数据的json表示形式，并也等待它（data.json（）也是一个承诺）

在得到结果之前，承诺处于pending状态。服务器尚未回复我们的请求。

- 阅读注释后，添加错误处理程序可能会很好，因为这就是为什么当前的获取操作可能什么都不做的原因： fetch().then((data) => data.json()).catch((error) => console.log(error))

Answer 2

Promises是一种允许调用者在等待函数结果时做其他工作的方法。

请参阅MDN上的Promises和Using Promises：

  

诺言处于以下状态之一：

     

  
• 待定：初始状态，既未实现也不被拒绝。
  
• 已完成：表示操作成功完成。
  
• 已拒绝：表示操作失败。
  

fetch(url)返回一个Promise对象。它允许使用可以响应结果值（响应请求）的.then(…)附加“侦听器”。 .then(…)再次返回Promise对象，该对象将结果转发出去。

async和await

您可以使用JS语法糖来使用Promises：

async function my_async_fn(url) {
    let response = await fetch(url);
    console.log(response); // Logs the response
    return response;
)

console.log(my_async_fn(url)); // Returns Promise

async function返回一个Promise。 await关键字将功能的其余部分包装在.then(…)中。这等效于没有await和async的情况：

// This function also returns Promise
function my_async_fn(url) {
    return fetch(url).then(response => {
        console.log(response); // Logs the response
        return response;
    });
)

console.log(my_async_fn(url)); // Returns Promise

再次在MDN上查看article on Promises。

Answer 3

正如上面的评论之一所说，fetch()是一个诺言，当请求由网络处理时，它将调用.then()。此回调中的参数是另一个承诺，当我们从服务器获得响应时，它将调用$.then()。

也许您应该尝试这样的事情：

fetch(res.url)
    .then(function(serverPromise){ 
      serverPromise.json()
        .then(function(j) { 
          console.log(j); 
        })
        .catch(function(e){
          console.log(e);
        });
    })
    .catch(function(e){
        console.log(e);
      });

或lambda表示法

fetch(res.url)
    .then((serverPromise) => 
      serverPromise.json()
        .then((j) => console.log(j))
        .catch((e) => console.log(e))
    })
    .catch((e) => console.log(e));

这是我第一次在StackOverflow上发帖，所以请让我知道我是否犯了任何错误或您有任何建议，谢谢！