如何将使用fetch调用的函数改写为async/await的写法

改写后的代码实现 #

coreHTTP.prototype.post = async (url, data) => {
  try {
    // 等待fetch请求返回响应对象
    const response = await fetch(url, {
      method: "POST",
      headers: {"content-type": "application/json"},
      body: JSON.stringify(data)
    });
    // 等待响应体解析为JSON格式后返回
    return await response.json();
  } catch (error) {
    // 捕获请求或解析过程中的所有错误，抛出后等效于原逻辑的reject
    throw error;
  }
}

核心逻辑说明 #

• 原代码中手动包裹new Promise属于冗余写法：fetch本身就返回Promise实例，被async标记的函数默认也会返回Promise对象，不需要额外嵌套封装
• await关键字仅可在async修饰的函数内部使用，因此首先要为目标函数添加async标识符
• 用try/catch代码块替代原链式调用的.catch()错误捕获逻辑，所有await执行过程抛出的异常都会被catch块捕获，直接抛出错误即可实现和原代码reject完全一致的效果
• response.json()本身是异步方法，返回Promise实例，因此也需要搭配await等待解析完成后再返回
• 改写后的方法调用方式和原方法完全兼容，既可以保持原有.then()/.catch()链式调用写法，也可以在其他async函数内直接用await接收返回结果

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