Question

我在js中有一些简单的Promise：

 let link = "https://jsonplaceholder.typicode.com/posts/1";            
             
 fetch(link)
      .then(response => response.json())  
      .then(data => console.log(data))         
      .catch(error => console.error(error));

...我想把它翻译成'async await'，就像这里：

  const API_ENDPOINT = 'https://jsonplaceholder.typicode.com/posts/1';

  const fetchUsers = async () => {
  const response = await fetch(API_ENDPOINT);
  const data = await response.json();  
  };

...但我不知道如何正确地参与'async await'。这涉及错误：

fetchUsers()
    .then(response => response.json())
    .then (data => console.log(data))
    .catch(error => console.error(`ERROR ${error}`));

你能帮我解决这个错误吗？

Answer 1

 const API_ENDPOINT = 'https://jsonplaceholder.typicode.com/posts/1';

  const fetchUsers = async () => {
    const response = await fetch(API_ENDPOINT);
    const data = await response.json();  
    console.log(data);
  };

您的代码完全正常工作只需调用fetchUsers（），它将通过此行console.log(data);打印数据

您不能在async类型函数

之外使用await关键字

阅读本文 -

异步函数可以包含暂停的await表达式   执行异步函数并等待传递的Promise   解析，然后恢复异步函数的执行和   返回已解析的值。

请记住，await关键字仅在异步函数中有效。如果   你在异步函数体外使用它，你会得到一个   的SyntaxError。

Answer 2

异步功能必须是功能。所以，你需要创建一个函数来做到这一点。 MDN说：

async函数声明定义了一个异步函数，它返回一个AsyncFunction对象。

在MDN

上详细了解相关信息

所以：

使用async关键字
使用fetch关键字

await

使用围绕任何承诺相关操作的await关键字执行函数内的任何其他操作（如果需要）

以下示例：

async function doFetch(link) { let result = await fetch(link); // this will wait the result to be fetched console.log(result); // this will only log the result of the fetch promise after it is resolved let json = await result.json(); console.log(json); } const link = 'https://jsonplaceholder.typicode.com/posts/1'; doFetch(link);

另外，请记住，当您使用await关键字时，您的异步代码将实际同步运行，因此，对任何promises的两个连续调用将同步运行，如下所示：

async function foo() { let bar = await fetch('https://www.google.com'); // the line below will run just _*AFTER*_ the above line is completely resolved let baz = await fetch('https://www.facebook.com'); }

Answer 3

这里有两个问题;

您不会从异步功能中返回任何内容
您应用response.json()两次。

将代码核心化为;

const API_ENDPOINT = 'https://jsonplaceholder.typicode.com/posts/1',
      fetchUsers   = async () => { var response = await fetch(API_ENDPOINT);
                                   return await response.json();
                                 };
fetchUsers().then (data => console.log(data))
            .catch(error => console.error(`ERROR ${error}`));

如何将Promise代码转换为异步等待

3 个答案: