Vue.js异步delete方法调用fetch删除数据返回404问题如何解决

你的问题核心不是执行顺序或者await加少了，是对fetch的返回值逻辑理解有误：

• fetch调用返回的是Response对象，仅代表请求响应本身，不包含接口返回的业务JSON数据，你需要主动调用.json()方法解析响应体才能拿到_id、_rev这类业务字段。
• 你给普通对象属性读取操作加await是无效的，这类同步操作不需要异步等待。
• DELETE请求返回的deleteItem同样是Response对象，没有data属性，也需要解析后才能拿到返回结果。

修正后的完整代码 #

async deleteItemFromDb(item_id) {
  try {
    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)
    }

    // 1. 发起GET请求，等待响应返回
    const getUrl = dbUrl + item_id
    const projectRes = await fetch(getUrl, {
      method: "GET",
      headers: headers,
      mode: "cors",
      credentials: "include"
    })
    // 判断请求是否正常返回，避免4xx/5xx错误导致后续逻辑异常
    if (!projectRes.ok) throw new Error('GET请求失败：' + projectRes.statusText)
    // 2. 解析响应体拿到业务数据，这里需要加await因为.json()是异步方法
    const projectData = await projectRes.json()

    // 3. 拼接DELETE请求URL，直接取业务数据的属性，不需要加await
    const delUrl = `${dbUrl}${projectData._id}?rev=${projectData._rev}`
    // 4. 发起DELETE请求
    const deleteRes = await fetch(delUrl, {
      method: "DELETE",
      headers: headers,
      mode: "cors",
      credentials: "include"
    })
    if (!deleteRes.ok) throw new Error('DELETE请求失败：' + deleteRes.statusText)
    // 5. 解析DELETE请求返回结果
    const deleteResult = await deleteRes.json()

    console.log("Item deleted from DB:", deleteResult)
  } catch (err) {
    // 错误捕获方便定位问题
    console.error('删除操作失败：', err)
  }
}

正确执行顺序与需要加await的操作 #

所有异步操作都需要加await，对应以下几个节点：

• 等待GET请求的Response对象返回：await fetch(GET请求)
• 等待GET响应体解析为JSON：await projectRes.json()
• 等待DELETE请求的Response对象返回：await fetch(DELETE请求)
• 等待DELETE响应体解析为JSON：await deleteRes.json()

额外建议 #

实际生产环境建议统一对fetch做二次封装，自动处理响应解析、错误抛出、通用header拼接等逻辑，避免重复写模板代码。

内容的提问来源于stack exchange，提问作者AbreQueVoy