今天我们来聊一聊JavaScript 网络请求实现方式有哪些？

@程序员ALMJ

已于 2025-04-14 12:56:36 修改

阅读量635

点赞数 8

CC 4.0 BY-SA版权

文章标签： javascript 开发语言前端网络 jquery ajax

于 2025-03-27 16:48:06 首次发布

本文链接：https://blog.youkuaiyun.com/aA20030316/article/details/146564644

1. XMLHttpRequest (XHR)

这是最传统的 AJAX 请求方式，虽然现在有更现代的替代方案，但仍然被广泛支持。

// 创建 XHR 对象
const xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'https://api.example.com/data', true); // 异步请求

// 设置请求头（可选）
xhr.setRequestHeader('Content-Type', 'application/json');

// 定义响应处理
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    console.log('成功响应:', xhr.responseText);
  } else {
    // 请求失败
    console.error('请求失败:', xhr.statusText);
  }
};

// 定义错误处理
xhr.onerror = function() {
  console.error('请求出错');
};

// 发送请求
xhr.send();

最初学习网络请求的时候我也从这种原生js来实现网络请求开始学的，虽然传统但是推荐大家也学一学

POST 请求示例：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  // 处理响应
};

const data = JSON.stringify({ key: 'value' });
xhr.send(data);

2. Fetch API

Fetch API 是现代浏览器提供的更简洁的替代方案，基于 Promise。

// GET 请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json(); // 解析 JSON 数据
  })
  .then(data => {
    console.log('成功获取数据:', data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

POST 请求示例：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
  .then(response => response.json())
  .then(data => console.log('成功:', data))
  .catch(error => console.error('错误:', error));

带 async/await 的 Fetch：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    const data = await response.json();
    console.log('数据:', data);
  } catch (error) {
    console.error('获取数据出错:', error);
  }
}

fetchData();

3. Axios

Axios 是一个流行的第三方 HTTP 客户端库，基于 Promise。

首先需要引入 Axios：（必须要引入这个链接不然请求不了哦哦！！！）

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

或者通过 npm 安装：

npm install axios

但是我还是推荐第一个直接引入的方式，因为很快且方便，复制粘贴就行了，你们说是不是

使用示例：

// GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log('响应数据:', response.data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

// POST 请求
axios.post('https://api.example.com/data', { key: 'value' })
  .then(response => {
    console.log('响应数据:', response.data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

带 async/await 的 Axios：

async function getData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('数据:', response.data);
  } catch (error) {
    console.error('获取数据出错:', error);
  }
}

getData();

4. jQuery AJAX（重点来了噢噢）

如果你项目中已经使用了 jQuery，可以使用其 AJAX 方法。

首先需要引入 Axios：（必须要引入这个链接不然请求不了哦哦！！！）

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">

// GET 请求
$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log('成功:', data);
  },
  error: function(error) {
    console.error('错误:', error);
  }
});

// POST 请求
$.ajax({
  url: 'https://api.example.com/data',
  method: 'POST',
  data: { key: 'value' },
  success: function(data) {
    console.log('成功:', data);
  },
  error: function(error) {
    console.error('错误:', error);
  }
});

5. WebSocket

对于需要实时双向通信的场景，可以使用 WebSocket。

// 创建 WebSocket 连接
const socket = new WebSocket('wss://api.example.com/socket');

// 连接打开时
socket.onopen = function(event) {
  console.log('连接已建立');
  // 发送数据
  socket.send(JSON.stringify({ type: 'greeting', message: 'Hello Server!' }));
};

// 接收消息
socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('收到消息:', data);
};

// 连接关闭时
socket.onclose = function(event) {
  console.log('连接已关闭', event);
};

// 错误处理
socket.onerror = function(error) {
  console.error('WebSocket 错误:', error);
};