异步方法未按正确顺序检索信息答案

【问题标题】：Async method doesn't retrieve information in correct order异步方法未按正确顺序检索信息
【发布时间】：2021-10-04 23:45:55
【问题描述】：

在 Vue.js 中，我有这个方法：

async deleteItemFromDb(item_id) {
      const dbUser = this.settings.db_user
      const dbCreds = this.settings.db_creds
      const dbUrl = "http://127.0.0.1:9878/items/"

      const headers = {
        "Content-Type": "application/json",
        "Authorization": "Basic " + btoa(dbUser + ":" + dbCreds)
      }

      let getUrl = dbUrl + item_id
      const projectData = await fetch(getUrl, {
        method: "GET",
        headers: headers,
        mode: "cors",
        credentials: "include"
      })

      let delUrl = dbUrl + await projectData._id + "?rev=" + await projectData._rev
      const deleteItem = await fetch(delUrl, {
        method: "DELETE",
        headers: headers,
        mode: "cors",
        credentials: "include"
      })

      console.log("Item deleted from DB:", deleteItem.data)
}

这里发生的情况是 projectData 没有报告任何错误，因此 fetch 方法可以正确启动，但 deleteItem 会返回类似以下内容：

DELETE http://127.0.0.1:9878/items/undefined?rev=undefined 404 (Object Not Found)

另外，console.log 返回 undefined 作为数据。

我认为数据无法很快返回以正确形成delUrl。但是正确的顺序是什么，或者更确切地说，哪些变量应该在这里标记为await？

【问题讨论】：

为什么这里有等待？ let delUrl = dbUrl + await projectData._id + "?rev=" + await projectData._rev 这些不正确，删除它们。现在你可能想要读取 JSON 而不是原始的 fetch 请求
console.log(projectData) 记录了什么？实际上，您不需要第二次等待。 fetch 返回一个 Promise，如果解决了，await 就完成了它的工作，结果存储在 projectData 变量中。如果您希望返回 JSON 数据，则需要对其进行处理。 .then(res => res.json())

标签： javascript vue.js async-await

【解决方案1】：

fetch() 之后需要调用 .json()（如果您希望使用不同的数据格式，则需要调用 other functions 之一）

const response = await fetch(getUrl, {  
  method: "GET",
  headers: headers,
  mode: "cors",
  credentials: "include"
})
const data = await response.json();
let delUrl = dbUrl + data._id + "?rev=" + data._rev

【讨论】：

【解决方案2】：

从下面的语句中删除等待

      const projectData = await fetch(getUrl, {
        method: "GET",
        headers: headers,
        mode: "cors",
        credentials: "include"
      }).json(); // change added

      let delUrl = dbUrl + projectData._id + "?rev=" + projectData._rev; // removed await

【讨论】：