【前端】Axios AJAX Fetch

不定期更新，建议关注收藏点赞。

---

Axios

• axios 是一个基于 Promise 的 JavaScript HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一个简单的 API 来发起请求，并处理请求的结果。axios 主要用于与服务器进行数据交互，比如发送 GET、POST、PUT、DELETE 请求等。相比于浏览器原生的 fetch API，axios 提供了更多的功能和便利，特别是在处理请求和响应时。

axios.get('/api/todolist')
.then((res)=>{console.log(res.data);this.setState(()=>{return {list: [...res.data]}})
.catch(()=>{alert('error')})
}

1. 安装 axios

如果你使用的是 Node.js 或者 React 等项目，首先需要通过 npm 或 yarn 安装 axios。

# 使用 npm 安装
npm install axios# 使用 yarn 安装
yarn add axios

2. 基本用法

axios 提供了多种方法来发送 HTTP 请求，包括 axios.get()、axios.post()、axios.put()、axios.delete()等。

发送 GET 请求

import axios from 'axios';axios.get('https://api.example.com/data').then(response => {console.log(response.data);  // 响应数据}).catch(error => {console.error('Error fetching data:', error);});

• get 方法用于发送 GET 请求。
• response.data 包含了从服务器返回的数据。

发送 POST 请求

import axios from 'axios';const data = {name: 'John Doe',email: '[e-mail]'
};axios.post('https://api.example.com/users', data).then(response => {console.log('User created:', response.data);}).catch(error => {console.error('Error posting data:', error);});

• post 方法用于发送 POST 请求。
• 请求体中的数据（data）会被发送到服务器。

发送 PUT 请求

import axios from 'axios';const updatedData = {name: 'Jane Doe',email: '[e-mail]'
};axios.put('https://api.example.com/users/1', updatedData).then(response => {console.log('User updated:', response.data);}).catch(error => {console.error('Error updating data:', error);});

• put 方法用于发送 PUT 请求。它通常用于更新现有的资源。

发送 DELETE 请求

import axios from 'axios';axios.delete('https://api.example.com/users/1').then(response => {console.log('User deleted:', response.data);}).catch(error => {console.error('Error deleting data:', error);});

• delete 方法用于删除指定的资源。

3. 请求配置

axios 支持配置请求的各个方面，如 headers、params、timeout 等。你可以通过第二个参数传递一个配置对象来设置这些选项。

示例：设置请求头

import axios from 'axios';axios.get('https://api.example.com/data', {headers: {'Authorization': 'Bearer your_token_here'}
}).then(response => {console.log(response.data);}).catch(error => {console.error('Error:', error);});

示例：设置请求超时

import axios from 'axios';axios.get('https://api.example.com/data', {timeout: 5000  // 设置超时时间为 5 秒
}).then(response => {console.log(response.data);}).catch(error => {if (error.code === 'ECONNABORTED') {console.log('Request timeout');} else {console.error('Error:', error);}});

4. 拦截器（Interceptors）

axios 提供了拦截器机制，使得你可以在请求发送之前或响应返回之后执行一些逻辑。

请求拦截器

import axios from 'axios';axios.interceptors.request.use(config => {console.log('Request Interceptor:', config);// 在发送请求之前做些什么，比如添加 token 等config.headers['Authorization'] = 'Bearer your_token_here';return config;
}, error => {return Promise.reject(error);
});

响应拦截器

import axios from 'axios';axios.interceptors.response.use(response => {console.log('Response Interceptor:', response);return response;
}, error => {console.error('Response Error:', error);return Promise.reject(error);
});

• 请求拦截器可以在请求发送之前修改请求的配置。
• 响应拦截器可以在响应返回之后处理响应数据或者捕获错误。

5. 取消请求

有时你可能需要取消一个正在进行的请求，axios 提供了 CancelToken 来实现这一功能。

import axios from 'axios';const cancelToken = axios.CancelToken;
const source = cancelToken.source();axios.get('https://api.example.com/data', {cancelToken: source.token
}).then(response => {console.log(response.data);}).catch(error => {if (axios.isCancel(error)) {console.log('Request canceled:', error.message);} else {console.error('Error:', error);}});// 取消请求
source.cancel('Operation canceled by the user.');

6. 并发请求

axios 还可以让你同时发送多个请求，并在它们全部完成后进行处理，使用 axios.all 和 axios.spread 来实现。

import axios from 'axios';const request1 = axios.get('https://api.example.com/data1');
const request2 = axios.get('https://api.example.com/data2');axios.all([request1, request2]).then(axios.spread((response1, response2) => {console.log('Response 1:', response1.data);console.log('Response 2:', response2.data);})).catch(error => {console.error('Error:', error);});

7. 处理错误

axios 会将所有错误统一通过 catch 捕获。你可以通过 error.response 来访问服务器返回的错误信息。

import axios from 'axios';axios.get('https://api.example.com/data').then(response => {console.log(response.data);}).catch(error => {if (error.response) {// 服务器返回了响应console.error('Response error:', error.response);} else if (error.request) {// 请求已发出但没有收到响应console.error('Request error:', error.request);} else {// 发生了其他错误console.error('Error:', error.message);}});

• axios v.s. AJAX v.s. fetch

axios 在前端开发中具有较高的使用率，fetch 作为原生 API 也被广泛采用，而 XMLHttpRequest 的使用率相对较低。

特性	AJAX (XMLHttpRequest)	Fetch API	Axios
基于	回调函数	Promise	Promise
请求响应处理	需要手动管理请求状态和解析响应	自动解析 JSON，但仍需要手动处理错误	自动解析 JSON，无需手动处理响应数据
请求和响应拦截器	无	无	支持请求和响应拦截器
跨域请求	需要额外配置 CORS 头	需要额外配置 CORS 头	支持自动处理跨域请求（需要后端支持）
请求取消	需要使用 AbortController	需要使用 AbortController	支持请求取消，直接使用 CancelToken
浏览器兼容性	在所有浏览器中都能工作，但老旧浏览器不支持	大多数现代浏览器支持，但 IE 需要 polyfill	支持现代浏览器和 IE（需要 polyfill）
支持的功能	基本的 HTTP 请求功能	基本的 HTTP 请求功能	更丰富的功能：请求/响应拦截器、取消请求等
使用难度	相对较复杂，需要手动管理请求状态和响应解析	简单，支持 Promise，且 API 直观	简单，且有更多的功能和配置选项

• axios与python requests库

功能	Axios (JavaScript)	Requests (Python)
异步操作	基于 Promise，支持 async/await	同步请求，需要配合 aiohttp 异步库
自动解析响应	自动解析 JSON	自动解析 JSON
请求拦截器/响应拦截器	支持请求和响应拦截器	不支持直接的拦截器功能
取消请求	支持 CancelToken 来取消请求	无原生支持取消请求
跨域请求	处理跨域请求（CORS）	不涉及浏览器，跨域由后端控制
浏览器支持	支持现代浏览器	仅支持 Python 环境

低级 HTTP 请求通常是指在较低的抽象层次上进行的 HTTP 请求，通常需要开发者手动处理许多细节，例如请求头、参数、响应处理、编码等。相比高级 HTTP 请求，低级 HTTP 请求提供了更多的灵活性和控制，但也要求开发者更了解底层的 HTTP 协议和细节。

python中类似的库：requests、httpx、aiohttp、urllib、pycurl、tornado，后端开发使用。

AJAX

AJAX（Asynchronous JavaScript and XML）本身并不属于 HTML。它是一个基于 JavaScript 的技术，用于实现网页的异步请求和更新。因此，AJAX 更准确地说是 JavaScript 技术，而不是 HTML 技术。
AJAX（Asynchronous JavaScript and XML）是一个用于创建动态和交互式网页的技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种方式能提高用户体验，因为它使得网页加载更加流畅，用户可以与页面进行交互，而无需等待页面的完全刷新。
尽管它的名字中有 “XML”，但现在 AJAX 主要用于通过 JSON（JavaScript Object Notation）与服务器交换数据。不过，它也支持通过 XML、HTML 或纯文本等格式进行数据交换。

• AJAX 的工作原理
  AJAX 允许浏览器在后台发送 HTTP 请求到服务器，获取数据并在不刷新页面的情况下更新网页内容。通常，AJAX 使用 JavaScript 与服务器进行通信，通过 XMLHttpRequest 对象或现代的 fetch API 来发送请求。
  AJAX 的基本流程如下：
  用户发起请求（例如，点击按钮或加载页面时）。
  JavaScript 使用 XMLHttpRequest 或 fetch() 向服务器发送请求（GET、POST 等）。
  服务器接收请求，处理数据，并返回响应。
  JavaScript 处理服务器返回的数据，并更新页面内容。

什么是 XMLHttpRequest 对象？
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象能够：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

responseText 只适用于文本响应。如果服务器返回的是 JSON 或 XML 数据，可以使用 JSON.parse(req.responseText) 来将其转换为 JavaScript 对象，或使用 req.responseXML 获取 XML 格式的响应。

readyState 表示当前请求的状态。
XMLHttpRequest 的请求生命周期有 5 个阶段（0 到 4），表示请求的不同状态：
0 - UNSENT：对象已创建，但尚未调用 open() 方法。
1 - OPENED：已调用 open()，但尚未调用 send()。
2 - HEADERS_RECEIVED：已发送请求，并且已接收到响应头。
3 - LOADING：正在下载响应体。
4 - DONE：响应已完全下载，处理完成。
status 表示 HTTP 响应的状态码。

• 例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX Example</title>
</head>
<body><h1>AJAX Example</h1><button id="loadData">Load Data</button><div id="result"></div>  <!-- 结果将显示在这里 --><script src="app.js"></script>
</body>
</html>

// 获取按钮和结果展示区域
const button = document.getElementById('loadData');
const result = document.getElementById('result');// 添加点击事件监听器
button.addEventListener('click', function() {// 创建一个新的 XMLHttpRequest 对象const xhr = new XMLHttpRequest();// 配置请求：GET 请求，指向一个 JSON 文件xhr.open('GET', 'data.json', true);  // 异步请求// 设置 onload 事件处理函数xhr.onload = function() {if (xhr.status === 200) {  // 如果请求成功const data = JSON.parse(xhr.responseText);  // 解析返回的 JSON 数据result.innerHTML = `Message: ${data.message}`;  // 显示结果} else {result.innerHTML = 'Error loading data';}};// 发送请求xhr.send();
});

XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。
注意，尽量不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

• 上面代码的URL使用的是相对路径。如果你把它改为’http://www.sina.com.cn/'，再运行，肯定报错。在Chrome的控制台里，还可以看到错误信息。
  这是因为浏览器的同源策略导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。
  完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）使用 JavaScript 请求外域（即跨域请求）时，通常会遇到 跨域资源共享 (CORS, Cross-Origin Resource Sharing) 的限制。默认情况下，浏览器会阻止网页发起跨域请求，以保护用户的安全。为了绕过这个限制，目标网站必须明确允许你的域名进行请求。

CORS 允许跨域请求

用JavaScript怎么请求外域（就是其他网站）的URL了呢？

1. 使用 fetch() API（推荐）
   现代浏览器支持 fetch()，可以发起跨域请求，但前提是目标网站支持 CORS。如果目标网站没有明确设置允许跨域访问，那么请求会被浏览器阻止。如果目标网站支持 CORS 并正确设置了头部（例如 Access-Control-Allow-Origin），请求就会成功。

fetch('https://example.com/data', {method: 'GET',  // 或者 'POST'，取决于你的请求类型headers: {'Content-Type': 'application/json'},mode: 'cors'  // 必须设置为 'cors'，表示进行跨域请求
}).then(response => response.json())  // 解析 JSON 数据.then(data => console.log(data))    // 处理返回的响应.catch(error => console.error('Error:', error));  // 错误处理fetch('https://example.com').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.text();  // 将响应转换为文本（HTML）}).then(html => {console.log(html);  // 打印出返回的 HTML 文本}).catch(error => {console.error('There has been a problem with your fetch operation:', error);});

2. 使用 XMLHttpRequest（旧版）
   XMLHttpRequest 是发起 HTTP 请求的传统方式，它也可以用于发起跨域请求，但依赖于目标网站的 CORS 设置。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(JSON.parse(xhr.responseText));}
};
xhr.send();

Fetch

• 例子：使用 fetch() API 替代 XMLHttpRequest
  fetch() 是现代浏览器提供的一个 API，使用 Promise,比 XMLHttpRequest 更简洁，更强大的功能：fetch() 支持更多的功能，如设置请求头、控制超时等。并且它默认支持异步操作。这里是相同请求的 fetch() 版本：

const button = document.getElementById('loadData');
const result = document.getElementById('result');button.addEventListener('click', function() {// 使用 fetch 发起请求fetch('data.json').then(response => response.json())  // 解析返回的 JSON.then(data => {result.innerHTML = `Message: ${data.message}`;  // 显示数据}).catch(error => {result.innerHTML = 'Error loading data';console.error(error);});
});