如何从JS fetch返回的JSON响应中提取cartID并赋值给变量

fetch 是异步非阻塞API，调用getCart发起请求后，JavaScript主线程不会等待接口返回就会直接执行后续的同步代码，赋值操作只有在接口响应完成后才会触发，早于这个时机访问cartID拿到的都是初始值unknown。

方案1：在Promise回调链中处理赋值和后续逻辑 #

所有依赖cartID的业务逻辑都必须放在then回调中执行：

function getCart(url) {
   return fetch(url, {
       method: "GET",
       credentials: "same-origin"
   })
   .then(response => response.json())
};

var cartID = 'unknown';

getCart('/api/storefront/carts')
.then(data => {
  // 接口返回的是数组结构，取第一个元素的id字段
  cartID = data[0]?.id || 'unknown';
  // 所有依赖cartID的逻辑必须放在此处执行
  console.log('赋值完成的cartID：', cartID);
  // 示例：调用后续业务函数
  handleCartBusiness(cartID);
})
.catch(error => console.error(error));

// 此处为同步执行代码，请求未完成时cartID仍为unknown，不可在此处调用依赖cartID的逻辑

方案2：用async/await语法简化异步逻辑（更推荐） #

用同步写法风格处理异步逻辑，可读性更强：

function getCart(url) {
   return fetch(url, {
       method: "GET",
       credentials: "same-origin"
   })
   .then(response => response.json())
};

var cartID = 'unknown';

// 封装异步初始化函数
async function initCart() {
  try {
    const data = await getCart('/api/storefront/carts');
    cartID = data[0]?.id || 'unknown';
    // 所有依赖cartID的逻辑放在await之后执行
    console.log('赋值完成的cartID：', cartID);
    // 示例：调用后续业务函数
    handleCartBusiness(cartID);
  } catch (error) {
    console.error(error);
  }
}

// 执行初始化
initCart();

• 可选链?.用于兼容数组为空的异常场景，避免代码报错
• 永远不要在全局同步代码中直接访问异步赋值的cartID，所有依赖该变量的逻辑必须放在异步回调/await之后的位置执行

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