5.1 Fetch API
在 JavaScript 中执行 HTTP 请求常用两个库： 内置函数 fetch 和第三方库 Axios。 它们都提供强大和灵活的功能来处理 API 和其他网络资源。
Fetch API 是浏览器内置的执行 HTTP 请求的方式。 它基于 Promises 提供了一个灵活和现代的方式来处理网络请求。
简单 fetch 请求的语法：
let promise = fetch(url, {method, headers,
body})
Fetch 的主要概念：
fetch(url, options): 执行 HTTP 请求的主要方法- 返回一个 Promise，解析为 Response 对象
使用 Fetch 的简单 GET 请求示例：
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('网络错误：服务器返回不正确的响应');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('请求出现错误: ', error);
});
使用 Fetch 的 POST 请求示例：
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('请求出现错误: ', error);
});
Fetch 设置
Fetch API 允许通过 options 对象配置请求的各种参数，例如方法、头部、请求体等。
JavaScript
const options = {
method: 'GET', // 或 'POST', 'PUT', 'DELETE' 等
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // 用于 POST 和 PUT 请求
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('请求出现错误: ', error));
5.2 Axios 库
Axios 是一个用于 JavaScript 执行 HTTP 请求的流行库。相比原生的 Fetch API，它提供了更方便和功能更强大的 API， 还支持许多额外的功能，例如 JSON 自动转换、超时处理、请求中止和旧版浏览器的支持。
安装 Axios
Axios 可以通过 npm 安装或者通过 CDN 引入。
通过 npm 安装：
Terminal
npm install axios
在 Node.js 或使用模块打包工具（如 Webpack）中引入：
JavaScript
// 对于 CommonJS
const axios = require('axios');
// 对于 ES6 模块
import axios from 'axios';
通过 CDN 在浏览器中引入：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
简单 GET 请求的语法：
let promise = axios.get(url)
简单 POST 请求的语法：
let promise = axios.post(url, data, config)
Axios 的主要概念：
- axios(config): 执行 HTTP 请求的主要方法
- 接受配置对象，该对象可以包括
url、method、headers、data和其他参数。 - 快捷方法: Axios 提供了每个 HTTP 方法的专用方法（
axios.get,axios.post,axios.put,axios.delete等），简化相关请求的执行。 - Promises: 所有 Axios 方法都返回 Promise（承诺），它解析为响应对象，或在出错时拒绝。
使用响应和错误处理的简单 GET 请求语法：
JavaScript
axios.get(url)
.then(response => {
// 处理成功的响应
})
.catch(error => {
// 处理错误
});
使用响应和错误处理的简单 POST 请求语法：
JavaScript
axios.post(url, data, config)
.then(response => {
// 处理成功的响应
})
.catch(error => {
// 处理错误
});
使用 Axios 的简单 GET 请求示例：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('请求出现错误: ', error);
});
使用 Axios 的 POST 请求示例：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('请求出现错误: ', error);
});
5.3 Axios 配置
Axios 设置
Axios 允许通过 config 对象配置 HTTP 请求，其中包括 url、method、headers 和数据 (data)。 下面是一个请求配置的基本示例：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
const config = {
method: 'get', // 可以是 'get', 'post', 'put', 'delete' 等
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // 指定数据类型的头
},
// data: JSON.stringify(data) // 用于 POST 和 PUT 请求传递请求体
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('请求出现错误: ', error));
Axios 的额外功能：
- 请求参数: 可以通过 URL 传递请求参数。
- 请求中止: 使用
AbortController。 - 超时: 设置请求的等待时间。
使用请求参数的示例：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // 请求参数通过 params 对象传递
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('请求出现错误: ', error);
});
5.4 Fetch 和 Axios 比较
现在我们来对比 Fetch 和 Axios 在关键指标上的表现：
1. 使用简单性：
- Fetch: 对于基本操作十分简单，但对于复杂场景（如 JSON 转换、超时处理）需要额外处理。
- Axios: 提供了更方便和强大的 API 来处理复杂请求。
2. JSON 支持：
- Fetch: 需要明确调用
response.json()将响应体转换为 JSON。 - Axios: 自动转换 JSON 响应。
3. 超时：
- Fetch: 没有内置的超时支持。需要使用
AbortController或包装器实现超时。 - Axios: 通过配置支持超时设置。
4. 拦截器：
- Fetch: 不支持请求和响应的拦截器。
- Axios: 允许使用拦截器在发送请求前和获得响应后执行逻辑。
Axios 拦截器示例
拦截器 (Interceptors) 允许在发送请求之前或接收响应之后执行特定操作：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
// 添加请求拦截器
axios.interceptors.request.use(config => {
console.log('请求已发送到服务器: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
console.log('从服务器收到了响应: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// 带拦截器的请求示例
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('请求出现错误: ', error));
使用 Axios 执行并行请求
使用 Axios 可以轻松执行并行请求，并通过 Promise.all() 处理结果：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('请求出现错误: ', error));
GO TO FULL VERSION