JavaScript中如何在Promise外部获取内部异步返回的变量？

这是异步编程里非常常见的困惑，我来给你拆解清楚问题所在，以及怎么解决～

为什么你的变量还是Promise？ #

首先要明白：Promise是异步的，它不会阻塞后续代码的执行。你写的这段代码：

var fetchData = fetchOHLC(yUrl); 
var value= fetchData.then(function(value){ 
  console.log(value.t); 
  return(value.t); 
});

当JavaScript执行到var value = fetchData.then(...)这一行时，fetchOHLC返回的Promise还没完成（网络请求还在进行中），而.then方法本身就会返回一个新的Promise，所以value自然就是Promise对象，不是你想要的t值。

你看到console.log(value.t)能输出正确结果，是因为这行代码是在Promise成功resolve之后才执行的异步回调，这时候数据已经拿到了，但这时候你的value变量早就被赋值完了。

两种解决方案 #

方案1：用async/await（最直观的写法）

async/await是Promise的语法糖，能让异步代码看起来像同步代码一样。你可以把获取数据的逻辑放在一个async函数里：

// 定义一个async函数
async function getOHLCValue(yUrl) {
  try {
    // await会等待Promise完成，直接拿到结果
    const data = await fetchOHLC(yUrl);
    const value = data.t;
    console.log(value);
    // 在这里可以直接使用value做任何操作，比如计算、更新页面等
    return value;
  } catch (error) {
    // 处理请求失败的情况
    console.error('获取数据出错:', error);
  }
}

// 调用这个函数
getOHLCValue(yUrl);

await会暂停async函数的执行，直到fetchOHLC返回的Promise resolve，这时候data就是你从Promise里拿到的{ t }对象，而不是Promise本身。

方案2：在.then回调里处理所有后续逻辑

如果你不想用async/await，那所有需要用到t的代码都必须放在.then的回调函数里，因为只有这里能确保数据已经成功获取：

fetchOHLC(yUrl).then(function(data) {
  const value = data.t;
  console.log(value);
  // 在这里写所有需要使用value的逻辑，比如：
  // updateChart(value);
  // saveToLocalStorage('ohlc-t', value);
}).catch(function(error) {
  console.error('请求失败:', error);
});

记住：异步操作的结果只能在异步上下文里使用，不能直接同步赋值到外部变量——因为外部的同步代码会在异步回调执行前就跑完，根本拿不到结果。

补充优化你的fetchOHLC函数 #

顺便提一句，你的fetchOHLC可以用箭头函数简化一下，看起来更简洁：

function fetchOHLC(yUrl) {
  return fetch(yUrl)
    .then(response => response.json())
    .then(response => {
      const t = response.items[0].contentDetails.duration;
      return { t };
    })
    .catch(error => console.log(error));
}

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