推荐|第三章前端发起HTTP请求

深入浅出HTTP请求前后端交互系列专题
 第一章引言-HTTP协议基础概念和前后端分离架构请求交互概述
 第二章 HTTP请求方法、状态码详解与缓存机制解析
 第三章前端发起HTTP请求
 第四章前后端数据交换格式详解
 第五章跨域资源共享（CORS）：现代Web开发中的关键机制
 第六篇提升网页性能：深入解析HTTP请求优化策略（一）
第七篇提升网页性能：深入解析HTTP请求优化策略（二）
第八篇提升网页性能：深入解析HTTP请求优化策略（三）
第九篇 API设计原则与最佳实践
 第十篇 Axios最佳实战：前端HTTP通信的王者之选
 第十一篇前沿趋势与展望：深入探索GraphQL、RESTful API、WebSocket、SSE及QUIC与HTTP/3

第三章前端发起HTTP请求

1. XMLHttpRequest API 回顾与使用案例
2. Fetch API 的现代应用实践
3. Axios 库的功能特点与实际应用示例
4. 其他常用HTTP客户端库对比分析
- 4.1 jQuery.ajax 的使用与特点
- 4.2 superagent 库的功能特性
5. 总结

1. XMLHttpRequest API 回顾与使用案例

XMLHttpRequest (XHR) 是一个较早的、由浏览器提供的API，用于在后台（异步）与服务器交换数据。它允许网页从服务器请求新的数据并在不重新加载整个网页的情况下更新部分网页内容。

// 创建一个新的XMLHttpRequest对象实例
var xhr = new XMLHttpRequest();

// 设置请求方法和URL
xhr.open('GET', 'https://api.example.com/data');

// 设置请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status === 200) { // HTTP状态码为200表示成功
    var data = JSON.parse(xhr.responseText); // 解析返回的数据
    console.log(data);
  } else {
    console.error(xhr.statusText); // 输出错误信息
  }
};

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

// 可以设置请求头和其他选项
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.timeout = 3000; // 设置超时时间（毫秒）

2. Fetch API 的现代应用实践

Fetch API 是对 XMLHttpRequest 的更现代且基于 Promise 的替代方案，提供了一种更简洁的语法结构，并支持更多的高级功能，如更好的错误处理和流式读取响应体。

// 使用Fetch发起GET请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error("HTTP error " + response.status);
    }
    return response.json(); // 如果响应是JSON格式，则解析
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// 设置请求头并发送POST请求
fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'user1',
    password: 'password123'
  })
})
.then(handleResponse)
.catch(handleError);

function handleResponse(response) {
  // 对响应进行进一步处理
}

function handleError(error) {
  console.error('Error fetching data:', error);
}

3. Axios 库的功能特点与实际应用示例

Axios 是一个流行的JavaScript库，特别适用于基于Node.js的环境以及浏览器端，提供了丰富的功能集和易于使用的API来处理HTTP请求。

// 安装axios（如果在Node.js环境中）
npm install axios

// 在项目中导入axios
import axios from 'axios';

// 使用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/submit', {
  username: 'user1',
  password: 'password123'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  // 处理成功的POST操作
})
.catch(error => {
  // 处理错误
});

// Axios还支持配置默认值、取消请求、转换请求和响应数据等高级特性

4. 其他常用HTTP客户端库对比分析

jQuery.ajax：对于使用jQuery的项目来说，$.ajax() 方法是一个方便的选择，它封装了底层的XMLHttpRequest过程，简化了网络请求的编写，但在现代前端开发中，随着原生Promise和Fetch API的普及，其使用频率有所下降。
superagent：这是一个灵活、小型且强大的库，适合Node.js和浏览器环境。它具有简单易用的链式调用API和自动处理跨域请求等功能，同时支持各种HTTP方法和中间件插件。

4.1 jQuery.ajax 的使用与特点

jQuery库中的$.ajax()方法提供了一种简化版的HTTP请求方式，适用于那些仍在使用jQuery或者对兼容性有较高要求的项目。

// 使用jQuery发起GET请求
$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  dataType: 'json', // 指定预期的数据类型（如json、jsonp等）
  success: function(data, textStatus, jqXHR) {
    console.log('Data received:', data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Error occurred:', errorThrown);
  }
});

// 发起POST请求并传递数据
$.ajax({
  url: 'https://api.example.com/submit',
  method: 'POST',
  contentType: 'application/json', // 设置请求头内容类型
  data: JSON.stringify({ username: 'user1', password: 'password123' }),
  success: function(response) {
    // 处理成功的POST操作
  },
  error: function(xhr, status, error) {
    // 处理错误
  }
});

特点：

jQuery.ajax提供了简洁且易于理解的API，适合初级开发者快速上手。
兼容性良好，支持多种浏览器和版本。
支持多种数据类型转换，包括JSON、XML、HTML、script、jsonp等。
内置了对跨域资源共享(CORS)的支持，通过jsonp或者xhr2实现。
提供了丰富的配置选项和回调函数，便于进行错误处理和自定义需求。

4.2 superagent 库的功能特性

superagent 是一个强大且灵活的JavaScript HTTP客户端库，支持Node.js和浏览器环境，其API设计旨在方便地发送各种类型的HTTP请求。

// 安装superagent
npm install superagent

// 引入superagent
const request = require('superagent');

// 使用superagent发起GET请求
request
  .get('https://api.example.com/data')
  .then(response => {
    console.log('Data received:', response.body);
  })
  .catch(error => {
    console.error('Error occurred:', error);
  });

// 发起POST请求并传递数据
request
  .post('https://api.example.com/submit')
  .set('Content-Type', 'application/json') // 设置请求头
  .send({ username: 'user1', password: 'password123' }) // 发送请求体数据
  .then(response => {
    // 处理成功的POST操作
  })
  .catch(error => {
    // 处理错误
  });