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

Question

在 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？

Answer 1

fetch()随后需要调用（或者如果您期望不同的数据格式，则调用其他函数.json()之一）

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