JavaScript中如何使用axios发起同步HTTP GET请求

你当前的代码无法拿到正确返回值，原因很明确：

• axios.get 是异步方法，返回值为Promise对象，执行return response.data时HTTP请求还未完成，此时response不是最终的响应对象，读取到的data为undefined。
• 限制函数不能声明为async，就无法在函数内使用await等待Promise状态变更，因此原生axios的用法不可能实现你的需求。
• 重要提示：同步HTTP请求会阻塞当前执行线程，请求返回前所有后续代码、页面渲染（浏览器环境）、事件循环（Node环境）都会暂停，非极端场景不建议使用

axios本身不提供同步请求能力，你需要替换请求实现，保持load()的函数声明形式完全不变，直接返回接口数据：

Node.js 环境 #

方案1：使用同步请求依赖（推荐） #

安装支持同步调用的请求库sync-fetch：
npm install sync-fetch
函数实现：

const fetch = require('sync-fetch');
function load() {
  const res = fetch('https://你的目标请求地址');
  // 接口返回JSON数据用res.json()，返回纯文本/其他格式改用res.text()等对应方法
  return res.json();
}

方案2：无第三方依赖实现 #

借助Node内置子进程模块调用curl完成同步请求，不需要额外安装依赖：

const { execSync } = require('child_process');
function load() {
  const rawRes = execSync('curl -s "https://你的目标请求地址"', { encoding: 'utf8' });
  // 返回JSON数据就执行解析，返回纯文本直接return rawRes即可
  return JSON.parse(rawRes);
}

浏览器环境 #

直接用原生同步XMLHttpRequest实现，无需引入任何依赖：

function load() {
  const xhr = new XMLHttpRequest();
  // open第三个参数传false代表同步发起请求
  xhr.open('GET', 'https://你的目标请求地址', false);
  xhr.send(null);
  if (xhr.status >= 200 && xhr.status < 300) {
    // 返回JSON数据就解析，返回文本直接return xhr.responseText
    return JSON.parse(xhr.responseText);
  }
  throw new Error(`请求异常，状态码：${xhr.status}`);
}

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