关于Axios这一篇就够了

发布时间:2024年06月20日评论数：抢沙发阅读数： 242

什么是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 等头部信息。

本文作者：DGF 文章标题：关于Axios这一篇就够了
本文地址： https://arbays.com/post-240.html 本文已被百度收录！
版权声明：若无注明，本文皆为“富录-前端开发|web技术博客”原创，转载请保留文章出处。

最新文章：