关于Axios这一篇就够了
发布时间:2024年06月20日 评论数：抢沙发阅读数： 126
什么是Axios？
Axios 是一个基于 Promise 的 HTTP 库，用于浏览器和 Node.js环境。它允许您轻松地进行 HTTP 请求，并在现代浏览器中利用了一些特性，如 XMLHttpRequests Level 2。Axios 提供了一种简单的方式来发送请求和接收响应，并且可以在不改变原有代码的情况下，无缝地在浏览器和服务器之间切换。
Axios的历史背景
Axios 的灵感来自于 jQuery 的 $.ajax 方法，但它被构建为一个独立的库，以提供更好的性能和更简洁的API。它最初是由 Matt Zabriskie 在 2014 年开发，并且自那时以来一直积极维护和发展。
Axios的用途
Axios 主要用于前端开发中与服务器的通信，它可以方便地发起任何 HTTP 请求，如 GET、POST、PUT、DELETE 等。由于其轻量级、易用性和强大的功能，Axios 成为了许多前端开发者在构建单页应用程序（SPA）时的首选工具。
Axios相较于其它请求库的优势
与其他HTTP客户端相比，Axios 有以下几个显著的优点：
- 直观易用: Axios 提供了一个简洁而直观的 API，使得发起和接收 HTTP 请求变得非常容易。
- 跨浏览器兼容: Axios 在老版本浏览器（如 IE9）上同样可用，这得益于它的 Promise 底层实现。
- 灵活性: Axios 支持请求和响应拦截器，允许您在发送请求之前或之后执行一些操作。
- 取消请求: Axios 提供了一个 CancelToken API，使您能够取消正在进行的请求。
- TypeScript支持: Axios 具有 TypeScript 类型定义，这对于使用 TypeScript 开发的项目特别有利。
- 社区支持: Axios 有一个庞大的用户社区和活跃的维护者，这意味着您可以找到大量的文档和示例，而且库本身将持续更新和改进。
安装Axios
Axios 可以通过多种方式安装，最常用的是使用 npm 或 yarn。以下是安装命令：
# 使用npm npm install axios # 使用yarn yarn add axios
如果您不熟悉包管理器，也可以直接将 axios.min.js 文件包含在您的 HTML 中，如下：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
最基本的请求示例
使用 Axios 发起一个 GET 请求非常简单。以下是一个基本的例子：
import axios from 'axios';
axios.get('/api/data')
.then(response => {
console.log('Data:', response.data);
})
.catch(error => {
console.error('Error:', error);
});
在这个例子中，我们首先导入 axios，然后使用 axios.get() 方法发起一个 GET 请求。.then() 方法用于处理响应数据，.catch() 方法用于捕获并处理可能出现的错误。
发起一个 POST 请求也很容易，只需要替换方法名并提供额外的 data 参数：
axios.post('/api/data', {
name: 'John Doe',
email: 'john.doe@example.com'
})
.then(response => {
console.log('Posted data:', response.data);
})
.catch(error => {
console.error('Error posting data:', error);
});
从响应中获取数据
Axios 的 .then() 方法返回一个 Promise，该 Promise 解决时会返回响应对象。响应对象具有以下属性：
- status: HTTP 状态码。
- data: 服务器返回的数据。
- headers: 响应头信息。
- config: 发出请求时的配置对象。
如果需要访问响应头或状态码，你可以这样做：
axios.get('/api/data')
.then(response => {
console.log('Status code:', response.status);
console.log('Headers:', response.headers);
console.log('Data:', response.data);
})
.catch(error => {
console.error('Error:', error);
});
错误处理
当发生错误时，Axios 会抛出一个异常，可以使用 .catch() 方法来捕获和处理它：
axios.get('/api/data')
.then(response => {
// 处理正常响应
})
.catch(error => {
if (error.response) {
// 请求已发出，但服务器返回错误响应
console.error('Error response:', error.response.data);
} else if (error.request) {
// 请求失败，可能是网络问题
console.error('Request failed:', error.request);
} else {
// 其他错误，如配置问题
console.error('Error:', error.message);
}
});
在 .catch() 中，error 对象包含了有关错误的信息，包括 response（如果有）、request 和错误消息。
请求配置
每次发起 Axios 请求时，都可以提供一个 config 对象来定制请求的各个方面。以下是请求配置的主要选项：
baseURL
如果您的 API 有一个固定的基地址，可以设置 baseURL 以便在每次请求时自动添加该前缀。例如：
const instance = axios.create({
baseURL: 'https://api.example.com/v1/'
});
instance.get('users') // 将请求 https://api.example.com/v1/users
url
指定请求的资源路径。当 baseURL 被设置时，url 可以省略前面的基地址部分。
axios.get('/users') // 请求当前域名下的 /users 资源
method
定义请求方法。默认为 GET。支持 POST、PUT、DELETE、HEAD、OPTIONS 等。
axios({
method: 'put',
url: '/user/123',
data: {
name: 'New Name'
}
});
headers
设置请求头。默认情况下，Axios 会为 JSON 格式的请求体自动设置 Content-Type 为 application/json。
axios.get('/users', {
headers: {
'Authorization': 'Bearer my-api-token',
'Accept': 'application/json'
}
});
params
用于 GET 请求的查询参数。对于其他请求方法，使用 data 属性。
axios.get('/users', {
params: {
page: 1,
limit: 10
}
});
data
用于 POST、PUT、DELETE 等请求的请求体数据。
axios.post('/users', {
name: 'John Doe',
email: 'john.doe@example.com'
});
响应配置
除了请求配置之外，我们还可以配置如何接收和处理响应。
responseType
响应类型可以设置为 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' 或者 'urlencode'。默认为 'json'。
axios.get('/download', {
responseType: 'blob'
}).then(response => {
// 处理二进制数据
});
onDownloadProgress
监听下载进度的函数，返回一个 ProgressEvent 对象，包含 loaded、total 等属性。
axios.get('/largefile', {
onDownloadProgress: progressEvent => {
console.log(`已下载 ${progressEvent.loaded} 字节`);
}
});
validateStatus
自定义响应状态码的验证逻辑。如果返回 false，则请求将会被看作是一个错误。
axios({
method: 'get',
url: '/api/data',
validateStatus: status => {
// 如果状态码是 400，则认为请求成功
if (status === 400) {
return true;
}
// 其他情况下按照常规处理
return status >= 200 && status < 300;
}
});
自定义实例化配置
可以创建一个新的 Axios 实例，并为其指定特定的配置。
const instance = axios.create({
baseURL: 'https://api.example.com/',
timeout: 1000,
headers: {
'X-Custom-Header': 'value'
}
});
链式调用
可以利用 Promise 的链式调用特性来执行多个并发请求。
axios
.get('/api/users')
.then(response => {
console.log('Users:', response.data);
return axios.get('/api/posts', { params: { author: response.data.id } });
})
.then(response => {
console.log('Posts:', response.data);
})
.catch(error => {
console.error('Error:', error);
});
添加拦截器
Axios 提供了 axios.interceptors 属性来注册请求和响应拦截器。可以通过调用 axios.interceptors.request.use 和 axios.interceptors.response.use 方法来添加拦截器。
请求拦截器
请求拦截器可以在请求发送之前对其进行修改，例如添加认证令牌、处理加载状态等。
axios.interceptors.request.use(function (config) {
// 在这里添加一些通用逻辑，比如获取 token 并添加到请求头
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 返回更新后的配置
return config;
}, function (error) {
// 处理请求错误
return Promise.reject(error);
});
响应拦截器
响应拦截器可以在响应接收之后进行处理，例如处理错误、解析数据格式等。
axios.interceptors.response.use(function (response) {
// 在这里添加一些通用逻辑，比如处理响应数据格式
if (response.data && Array.isArray(response.data)) {
return response.data.map(item => item.name);
}
// 返回原始响应
return response;
}, function (error) {
// 处理响应错误
return Promise.reject(error);
});
移除拦截器
如果需要移除某个拦截器，可以使用 axios.interceptors.request.delete 和 axios.interceptors.response.delete 方法。
// 假设上面的请求拦截器被赋予了变量 interceptors const interceptor = axios.interceptors.request.use(...); // 后期如果需要移除该拦截器 axios.interceptors.request.delete(interceptor);
通用的错误处理
在实际项目中，通常需要对所有请求进行错误处理。可以使用响应拦截器来统一处理异常情况。
axios.interceptors.response.use(
response => response,
error => {
if (error.response) {
// 对应后端约定的错误码进行处理
switch (error.response.status) {
case 401:
// 未授权，跳转到登录页
break;
case 403:
// 权限不足，提示用户
break;
default:
// 其他错误，统一显示错误信息
}
} else if (error.message === 'Request failed with status code 404') {
// 资源未找到，显示404页面
} else {
// 网络问题或其他未知错误，显示错误提示
}
return Promise.reject(error);
}
);
权限验证
在每个请求中都需要进行权限验证，可以在请求拦截器中检查用户 token 并在过期时刷新。
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
// 如果 token 不存在或者过期，可以尝试刷新 token
if (!token || tokenExpired(token)) {
return new Promise((resolve, reject) => {
axios.post('/refresh-token', {
refresh_token: localStorage.getItem('refreshToken')
}).then(response => {
const { access_token } = response.data;
if (access_token) {
localStorage.setItem('token', access_token);
config.headers['Authorization'] = `Bearer ${access_token}`;
resolve(config);
} else {
reject(response);
}
}).catch(error => {
console.error('Token refresh failed:', error);
reject(error);
});
});
}
return config;
});
拦截器是 Axios 中非常强大的一个功能，它允许我们对请求和响应进行全局的管理与处理。通过拦截器，我们可以实现诸如权限验证、错误处理、数据格式转换等功能，极大地提高了我们的代码复用率和代码的可维护性。在实际项目中，合理使用拦截器能够使我们的前端架构更加健壮和灵活。
带进度事件的请求
如果你需要在请求过程中跟踪进度，例如上传文件时，可以使用 onUploadProgress 事件。
axios.post('/upload', data, {
onUploadProgress: progressEvent => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`上传进度: ${percentCompleted}%`);
}
});
取消操作（使用 CancelToken）
在某些情况下，你可能希望取消一个正在进行的请求，例如用户点击了取消按钮。Axios 提供了 CancelToken 来支持取消操作。
// 创建一个 CancelToken 的实例
const cancelToken = axios.CancelToken;
const source = cancelToken.source();
// 发起请求时使用这个 CancelToken
axios.get('/api/data', {
cancelToken: source.token
}).catch(error => {
if (axios.isCancel(error)) {
console.log('请求被取消:', error.message);
}
});
// 当需要取消请求时，调用 source.cancel()
source.cancel('操作已取消');
自定义认证
Axios 支持各种类型的认证方式，可以通过在请求头中添加相应的认证信息来实现。
Basic Authentication
axios.get('/private-api', {
auth: {
username: 'username',
password: 'password'
}
});
Bearer Token
axios.get('/api/data', {
headers: {
Authorization: `Bearer ${token}`
}
});
代理设置
如果你需要从客户端通过代理服务器发送请求，可以使用 proxy 选项。
axios.create({
baseURL: 'https://example.com/api/',
proxy: {
host: 'localhost',
port: 8080,
auth: {
username: 'proxy-username',
password: 'proxy-password'
}
}
});
自定义请求头
有时候我们需要为请求添加一些自定义的头部信息。
axios.get('/api/data', {
headers: {
'Custom-Header': 'Value'
}
});
使用URLSearchParams
对于需要以 application/x-www-form-urlencoded 格式发送的数据，可以使用 URLSearchParams。
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/api/data', params);
跨域资源共享（CORS）
在发起跨源请求时，Axios 默认会自动设置 Content-Type 为 application/json。如果后端需要进行 CORS 配置，则可能需要额外设置 Access-Control-Allow-Origin 等头部信息。
本文地址： https://arbays.com/post-240.html 本文已被百度收录！
版权声明：若无注明，本文皆为“富录-前端开发|web技术博客”原创，转载请保留文章出处。