Axios详解及用法

杨胜喜 發表於 2025-5-9 08:52:00

Axios简介
<blockquote>
Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境。它提供了一个简单、方便的API来处理HTTP请求和响应，并具备多种强大的特性，使其成为现代Web开发中不可或缺的工具。
</blockquote>
Axios的用法
1.安装Axios
在Node.js项目中，可以通过npm或yarn安装Axios。在浏览器中，可以直接通过script标签引入Axios的CDN链接。
<blockquote>
npm install axios
</blockquote>
或者
<blockquote>
通过script src="https://unpkg.com/axios/dist/axios.min.js"
</blockquote>
2.创建Axios实例
在Node.js中，可以通过new Axios()创建一个新的Axios实例；在浏览器中，可以通过axios.create()创建新的Axios实例。
<pre><code>const axios = require('axios');
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
</code></pre>
 
3.设置请求参数
通过Axios实例的request方法设置请求参数，如URL、请求方法、请求头等。
<pre><code>const config = {
method: 'get',
url: '/user/12345',
params: {
 ID: 12345
}
};
</code></pre>
 
4.发送请求
通过Axios实例的get、post、put、delete方法发送HTTP请求。
<pre><code>instance.get('/user?ID=12345')
.then(function (response) {
 console.log(response.data);
})
.catch(function (error) {
 console.error(error);
});
</code></pre>
 
5.处理响应
通过Promise的then、catch方法处理HTTP响应。
<pre><code>instance.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
</code></pre>
 
Axios的创作流程
Axios的创作流程主要包括以下几个步骤：
<ol>
<li>需求分析：确定需要实现的HTTP请求类型和特性，如GET、POST、PUT、DELETE等。</li>
<li>实例创建：根据需求创建一个或多个Axios实例，并配置公共参数。</li>
<li>请求配置：设置请求的参数、头部信息等。</li>
<li>发送请求：通过实例的方法发送HTTP请求。</li>
<li>处理响应：使用Promise的then、catch方法处理响应数据或错误。</li>
</ol>
Axios的优缺点
优点：
<ol>
<li>基于Promise：Axios的所有函数都返回一个Promise对象，支持async/await语法，使得异步操作更加简洁明了。</li>
<li>请求和响应拦截：可以在请求被发送之前或响应被处理之前进行修改，非常适用于添加公共头部信息、处理错误响应等场景。</li>
<li>自动转换JSON数据：Axios在默认情况下会将请求的数据转化为JSON格式，同时也会自动将响应的数据从JSON转化为JavaScript对象。</li>
<li>支持取消请求：提供了取消正在进行的请求的功能。</li>
<li>客户端支持防止CSRF/XSRF：Axios在某些情况下可以自动设置XSRF-TOKEN HTTP header，增加应用安全性。</li>
</ol>
缺点：
<ol>
<li>体积相对较大：与一些轻量级的HTTP库相比，Axios的体积稍大，但考虑到其丰富的功能和良好的兼容性，这一点是可以接受的。</li>
<li>学习成本：对于初学者来说，可能需要一定的时间来熟悉Axios的API和特性。</li>
</ol>
代码案例
<pre><code> const = await Promise.all([
 // 获取文件夹(type=5)
 axios.get(baseurl + `/netdisk-prod-api/out/list?pageNum=1&pageSize=10&type=5&parentId=${categoryId}`),
 // 获取图片(type=0)
 axios.get(baseurl + `/netdisk-prod-api/out/list?pageNum=1&pageSize=10&type=0&parentId=${categoryId}`),
 // 获取视频(type=1)
 axios.get(baseurl + `/netdisk-prod-api/out/list?pageNum=1&pageSize=10&type=1&parentId=${categoryId}`)
 ]);
</code></pre>
<pre><code> // 处理文件夹内容
 await Promise.all(type5Response.data.rows.map(async (item) => {
 const mediaDiv = document.createElement('div');
 mediaDiv.className = 'grid-item album';

 try {
 // 获取文件夹内容
 const response = await axios.get(baseurl + `/netdisk-prod-api/out/list?pageNum=1&pageSize=10&parentId=${item.id}`);
 const subItems = response.data.rows;
 }catch (error) {
 console.error('Error processing folder:', error);
 }
 }));
</code></pre>
 
发送GET请求
<details>
<summary>点击查看代码</summary>
<pre><code>axios.get('/user?ID=12345')
.then(function (response) {
 console.log(response.data);
})
.catch(function (error) {
 console.error(error);
});
</code></pre>
</details>
解释：
<blockquote>
axios.get：发送GET请求。 
'/user?ID=12345'：请求的URL和参数。 
.then(function (response) {...})：处理成功响应。 
.catch(function (error) {...})：处理错误响应。
</blockquote>
 
发送POST请求
<details>
<summary>点击查看代码</summary>
<pre><code>axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
</code></pre>
</details>
解释：
<blockquote>
axios.post：发送POST请求。 
'/user'：请求的URL。 
{firstName: 'Fred', lastName: 'Flintstone'}：请求的数据。 
.then(function (response) {...})：处理成功响应。 
.catch(function (error) {...})：处理错误响应。
</blockquote>
 
使用拦截器
<details>
<summary>点击查看代码</summary>
<pre><code>axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么，例如添加公共头部信息
config.headers['Authorization'] = 'Bearer token';
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
// 对响应数据做点什么，例如进行数据加密、解密等
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
</code></pre>
</details>
解释：
<blockquote>
axios.interceptors.request.use：添加请求拦截器。 
axios.interceptors.response.use：添加响应拦截器。 
在请求拦截器中，可以修改请求的配置，如添加头部信息。 
在响应拦截器中，可以修改响应的数据或处理错误。
</blockquote>
Axios的使用场景
<ol>
<li>前端与后端通信：Axios是前端与后端通信的常用工具，可以方便地发送各种HTTP请求并处理响应。</li>
<li>RESTful API调用：在调用RESTful API时，Axios提供了简洁明了的API，使得请求和响应的处理更加简单。</li>
<li>跨域请求：在需要跨域请求时，Axios可以配合CORS（跨源资源共享）机制实现跨域通信。</li>
<li>数据上传与下载：在文件上传和下载时，Axios可以方便地处理文件数据，并支持进度监控等功能。</li>
<li>错误处理与重试机制：Axios提供了强大的错误处理机制，并可以配合重试机制实现更加健壮的请求处理。</li>
</ol> 
来源：https://www.cnblogs.com/lfl-zyx/p/18861006

頁: [1]

琼殿技术论坛's Archiver

Axios详解及用法