关于Axios这一篇就够了
发布时间:2024年06月20日 评论数:抢沙发阅读数: 163
什么是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技术博客”原创,转载请保留文章出处。