不定期更新，建议关注收藏点赞。
目录
- Axios
- AJAX
- CORS 允许跨域请求
- Fetch
Axios
axios是一个基于Promise的 JavaScript HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一个简单的 API 来发起请求，并处理请求的结果。axios主要用于与服务器进行数据交互，比如发送 GET、POST、PUT、DELETE 请求等。相比于浏览器原生的fetchAPI，axios提供了更多的功能和便利，特别是在处理请求和响应时。
axios.get('/api/todolist')
.then((res)=>{console.log(res.data);this.setState(()=>{return {list: [...res.data]}})
.catch(()=>{alert('error')})
}
- 安装
axios
如果你使用的是 Node.js 或者 React 等项目，首先需要通过 npm 或 yarn 安装 axios。
# 使用 npm 安装
npm install axios# 使用 yarn 安装
yarn add axios
- 基本用法
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: 'john@example.com'
};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: 'jane@example.com'
};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方法用于删除指定的资源。
- 请求配置
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);}});
- 拦截器（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);
});
- 请求拦截器可以在请求发送之前修改请求的配置。
- 响应拦截器可以在响应返回之后处理响应数据或者捕获错误。
- 取消请求
有时你可能需要取消一个正在进行的请求，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.');
- 并发请求
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);});
- 处理错误
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了呢？
- 使用 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);});- 使用 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);});
});
