如何修改ajax函数使其能够正确返回内部output变量的值

你当前的代码无法拿到output值有两个核心原因：

1. 你初始化请求时http.open的第三个参数设为true，代表请求是异步执行的，http.send()执行后不会等待请求返回，会直接执行后面的return逻辑，此时onload回调还没触发，output还没被赋值
2. output变量定义在onload回调函数内部，属于局部变量，AJAX函数外层作用域根本访问不到这个变量

方案1：用Promise封装（生产环境推荐） #

这是目前处理异步请求的主流方案，不会阻塞页面交互，也能灵活处理成功/异常逻辑：

function ajax(url, data) {
  // 返回Promise实例，后续通过.then或者await拿结果
  return new Promise((resolve, reject) => {
    const http = new XMLHttpRequest();
    http.open('post', url, true);
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    http.onload = function() {
      if(http.status === 200 || http.status == 0) {
        // 请求成功返回响应结果
        resolve(http.responseText);
      } else {
        // 请求失败返回错误信息
        reject(new Error(`请求失败，状态码：${http.status}`));
      }
    }
    // 监听网络异常错误
    http.onerror = function() {
      reject(new Error('网络请求异常'));
    }
    http.send(data);
  })
}

调用方式 #

• 用.then链式调用：

ajax('你的接口地址', '请求参数').then(res => {
  // 此处拿到响应结果res
  console.log(res)
}).catch(err => {
  // 处理异常
  console.error(err)
})

• 用async/await语法调用（写法更简洁）：

// 必须在async标记的函数内部使用
async function fetchData() {
  try {
    const res = await ajax('你的接口地址', '请求参数');
    console.log(res);
  } catch (err) {
    console.error(err);
  }
}
fetchData();

方案2：改为同步请求（不推荐） #

注意：同步请求会阻塞浏览器主线程，请求返回前页面所有交互都会卡死，仅可用于特殊测试场景，不建议生产环境使用

function ajax(url, data) {
  const http = new XMLHttpRequest();
  // open第三个参数设为false，代表同步执行
  http.open('post', url, false);
  http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  http.send(data);
  if(http.status === 200 || http.status == 0) {
    return http.responseText;
  }
  throw new Error(`请求失败，状态码：${http.status}`);
}

调用方式 #

和普通同步函数调用逻辑一致：

const res = ajax('你的接口地址', '请求参数');
console.log(res);

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