如何借助Vuex调用Firebase REST API发送DELETE请求？

问题原因排查 #

• Firebase Realtime Database 的REST API中DELETE请求不识别请求体（body），你当前的写法即使传了要删除的指定请求数据，也不会生效，调用DELETE会直接删除接口路径对应节点的全部内容
• 你当前的接口路径只拼到了艺术家ID维度/requests/${payload.artistId}.json，执行DELETE会直接删除该艺术家下的所有请求数据，无法实现删除单条指定请求的需求
• response.json()缺少await关键字，导致你拿到的responseData是Promise对象而非实际接口返回值，错误判断逻辑完全失效
• 你缺少要删除的单条请求的唯一ID参数：Firebase中每条存储的请求数据都会生成唯一的key，你在拉取请求列表时需要把该key和数据一起存储，删除时需要把该key传入参数

如果你预期就是删除当前艺术家下的所有请求，只需删除fetch配置里的body参数、补全response.json()的await即可，无需调整其他逻辑。以下是按常规的「点击删除单条请求」需求给出的修复方案。

修复步骤 #

第一步：调整请求列表拉取逻辑，存储每条请求的唯一key #

你拉取/requests/${artistId}.json时，返回的结构是{请求key1: {email:xxx, message:xxx}, 请求key2: {...}}，需要把key也存入每条请求数据中，示例：

// 拉取请求列表的逻辑参考
const res = await fetch(`https://find-artist-d3495-default-rtdb.firebaseio.com/requests/${artistId}.json`)
const resData = await res.json()
const requestList = Object.entries(resData).map(([key, value]) => {
  return {
    id: key, // 把Firebase生成的唯一key存为请求的id
    ...value
  }
})

第二步：修改按钮触发逻辑，传入当前请求的唯一id #

<div class="actions">
  <!-- 若删除按钮在请求列表的v-for循环内，直接传入对应项的id即可 -->
  <base-button @click="deleteRequest(request.id)">Delete</base-button>
</div>

第三步：修改组件内的dispatch逻辑，新增请求id参数 #

async deleteRequest(requestId) {
  try {
    await this.$store.dispatch('requests/deleteRequest', {
      email: this.email,
      message: this.message,
      artistId: this.$route.params.id,
      requestId: requestId // 新增要删除的请求唯一id
    });
  } catch (err) {
    // 可在此处添加错误提示逻辑
    console.log(err.message)
  }
}

第四步：修改Vuex中的deleteRequest动作 #

async deleteRequest(context, payload) {
  // 路径拼到要删除的单条请求节点，DELETE请求不需要传body
  const response = await fetch(`https://find-artist-d3495-default-rtdb.firebaseio.com/requests/${payload.artistId}/${payload.requestId}.json`, {
    method: 'DELETE'
  });

  const responseData = await response.json(); // 补全await关键字

  if (!response.ok) {
    const error = new Error(responseData.message || '删除请求失败');
    throw error;
  }
  // 提交mutation时传入请求id，方便从列表中过滤对应数据
  context.commit('deleteRequests', payload.requestId);
}

第五步：修改对应deleteRequests mutation #

mutations: {
  deleteRequests(state, requestId) {
    // 从存储的请求列表中过滤掉id匹配的项即可
    state.requestList = state.requestList.filter(item => item.id !== requestId)
  }
}

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