没有从承诺中获得正确的数据

Question

大家好，我正在使用 await 关键字来等待对 return 的异步调用。我的 url 是一个 get url 所以如果我从我的浏览器调用它 json 是 returned。问题是当我尝试从我的代码中获取数据时，它 return 是我的承诺，但我无法弄清楚如何从该承诺中获取数据响应

getCustomerById: async (id) => {

    try {
      const response = await fetch("http://www.ready.buzlin.com/buzlinApp/customer/getCustomerById.php?k=xxx&id=xxx");
      // console.log("Response Returned: "+ JSON.stringify(response));
      // resolve(response.json());
        debugger;
      return response.json();
    } catch (err) {
    }
  }

现在这就是 json.reponse() return 我

有人能告诉我我做错了什么吗？谢谢

Answer 1

fetch(...) returns 一个承诺，并且您正在使用 await 展开该承诺，这很好。但是 response.json() 也是 returns 一个承诺，所以你可能也想在上面使用 await ：

const response = await fetch(url)
const json = await response.json()
debugger
return json

注意：正如 Thomas 在评论中指出的那样 - 如果您只是在异步函数中返回 response.json()，您不应该解包它 - 无论如何它都会被包裹在另一个承诺中。只是因为您正在进入调试器并尝试检查它，所以您需要从承诺中获取价值。事实上，您的函数应该更像这样：

getCustomerById: async (id) => {
  const url = 'http://example.com/customer/' + id
  return fetch(url).then((response) => response.json())
}

Answer 2

你必须明白的是，一旦你踏入未来("I promise that this will eventually return a value")，你将永远不会回到同步逐步处理的无聊而安全的世界。

// It does not matter what you do inside this function or
// what you return. Because of the await keyword, this will
// **always** return a promise.
//
getCustomerById: async (id) => { /* ... */ }

promise 是一个容器，您可以随心所欲地传递该容器。但是要查看容器内部，您需要使用回调。

（或者使用 async/await，这只是 .then 的语法糖。在后台它为你调用 .then，剩下的代码在你的 async 函数中作为回调。）

所以要得到结果，你需要等待promise resolve。这给您留下了 2 个选择：.then 或 await.

const apiKey = 'some_crazy_long_string_you_got_from_somewhere_safe'
const baseUrl = 'http://www.ready.buzlin.com/buzlinApp/customer'

// Let's show the object this is attached to, so we can 
// actually make calls to the function.
//
const customerQueries = {
  getCustomerById: async (id) => {
    const url = `${baseUrl}/getCustomerById.php?k=${apiKey}&id=${id}`

    let response
    try {
      response = await fetch(url)
      return response.json()
    } catch (err) {
      // ... Properly handle error 
      // If you are not going to properly handle this error, then
      // don't catch it. Just let it bubble up.
    }
  }
}

// Or a cleaner looking alternative that is also more true to the
// underlying behavior by skipping all this `async/await` nonsense.
// 
const customerQueries2 = {
  getCustomerById: (id) => {
    const url = `${baseUrl}/getCustomerById.php?k=${apiKey}&id=${id}`

    return fetch(url)
      .then(response => response.json())
      .catch(err => {
        // ... Properly handle error
      })
}


// Now to get at the result
// 

// Using .then
customerQueries.getCustomerById(27)
  .then(customer => {
    //
    // ... Do something with customer
    // 
  })

// Or using async/await
(async () => {
  const customer = await customerQueries.getCustomerById(27)
  //
  // ... Do something with customer
  // 
})()

没有从承诺中获得正确的数据

not getting correct data from promise

javascript

json

async-await

ecmascript-2017