JavaScript中如何将函数内部的coinPrice变量提取到外部使用

你无法在onload外部拿到coinPrice的原因有两个：

1. 作用域限制：你用const在onload回调内部声明的coinPrice是块级作用域变量，仅能在回调函数内部访问。
2. 异步执行逻辑：你初始化请求时第三个参数设为true，代表发起异步请求，send()方法调用后不会阻塞等待请求返回，会直接执行后续代码，此时onload回调还未触发，coinPrice尚未被赋值。

方案1：提升变量作用域+异步完成后访问 #

将coinPrice提到外层作用域声明，所有需要用到coinPrice的逻辑必须在请求完成后触发，不能在send()后直接同步读取。

var burl = 'https://fapi.binance.com';
var query = '/fapi/v1/ticker/price?symbol=BNBUSDT';
var url = burl + query
var XMLHttpRequest = require('xhr2');
var ourRequest = new XMLHttpRequest();

// 变量提升到外层作用域
let coinPrice = null;

ourRequest.open('GET', url, true);

ourRequest.onload = function() {
  coinPrice = ourRequest.responseText
  // 请求完成后再调用处理逻辑
  handlePrice()
}

ourRequest.send();

function handlePrice() {
  // 此处可正常访问coinPrice
  console.log('外部获取到的价格：', coinPrice)
}

注意：禁止在ourRequest.send()之后直接同步读取coinPrice，此时请求还未返回，值仍为初始的null。

方案2：回调函数传参 #

不需要提升全局变量，直接把需要用到价格的逻辑封装为回调函数，在onload内将价格作为参数传入，避免全局变量污染。

var burl = 'https://fapi.binance.com';
var query = '/fapi/v1/ticker/price?symbol=BNBUSDT';
var url = burl + query
var XMLHttpRequest = require('xhr2');
var ourRequest = new XMLHttpRequest();

ourRequest.open('GET', url, true);

ourRequest.onload = function() {
  const coinPrice = ourRequest.responseText
  // 执行回调并传入价格
  handlePrice(coinPrice)
}

ourRequest.send();

function handlePrice(price) {
  console.log('获取到的价格：', price)
  // 所有后续处理逻辑均可在此处编写
}

方案3：Promise + async/await 写法（更推荐） #

将请求逻辑封装为Promise，可实现用同步写法处理异步逻辑，代码可读性和可维护性更高。

const XMLHttpRequest = require('xhr2');

// 封装请求为Promise
function getCoinPrice() {
  const burl = 'https://fapi.binance.com';
  const query = '/fapi/v1/ticker/price?symbol=BNBUSDT';
  const url = burl + query
  const ourRequest = new XMLHttpRequest();
  
  return new Promise((resolve, reject) => {
    ourRequest.open('GET', url, true);
    ourRequest.onload = function() {
      if (ourRequest.status >= 200 && ourRequest.status < 300) {
        resolve(ourRequest.responseText)
      } else {
        reject(new Error('请求失败，状态码：' + ourRequest.status))
      }
    }
    ourRequest.onerror = function() {
      reject(new Error('网络请求错误'))
    }
    ourRequest.send();
  })
}

// 用async/await调用
async function main() {
  try {
    const coinPrice = await getCoinPrice()
    // 此处可正常使用coinPrice
    console.log('获取到的价格：', coinPrice)
    // 所有后续处理逻辑均可在此处编写
  } catch (err) {
    console.error('请求出错：', err)
  }
}

main()

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