十三、axios框架学习-白红宇的个人博客

十三、axios框架学习

发布日期：2021-05-08 02:35:59 浏览次数：19 分类：精选文章

本文共 1685 字，大约阅读时间需要 5 分钟。

一、axios的基本使用

axios 是一个基于 promise 的 HTTP 客户端，用于在前端应用中与服务器交互。以下是 axios 的基本使用方法和实用技巧。

1.1 安装axios

首先需要通过 npm 安装 axios 库：

npm install axios --save

1.2 发送get请求演示

通过 axios 发送 get 请求，可以轻松获取远程资源。以下是一个简单的示例：

axios.get('https://api.example.com/endpoint')

执行以上命令后，响应将被返回至 Promise 对象中。

1.3 并发请求

有时需要同时发送多个请求，可以通过 axios.all 方法将请求组合到数组中：

const requests = [ axios.get('https://api.example.com/endpoint1'), axios.get('https://api.example.com/endpoint2') ];

然后使用 axios.all 发送所有请求：

axios.all(requests)

返回的结果是一个包含所有响应的数组。为了方便处理，可以使用 spread 操作符将结果分解：

const [res1, res2] = axios.all(requests);

1.4 全局配置

在 axios 的默认配置中，baseURL 已设置为 'https://api.example.com'。为了避免频繁重复配置，可以通过创建自定义实例来管理默认设置：

const axiosInstance = axios.create({ baseURL: 'https://api.example.com', timeout: 1000 });

然后使用自定义实例进行请求：

axiosInstance.get('/endpoint');

1.5 常见配置选项

axios 提供了多种配置选项，常用的包括：

baseURL：指定请求的基础 URL。 -

timeout：设置请求超时时间。 -

headers：添加请求头。 -

data：发送 POST 请求时附加的数据。

1.6 axios的实例

创建 axios 实例的意义在于：

- 当默认实例的配置无法满足需求时。 - 例如，某些请求需要特定的 baseURL 或 timeout 设置。

通过自定义实例，可以避免配置冲突，提升代码的可维护性。

1.7 axios封装

为了提高开发效率，可以对 axios 请求进行封装。以下是几种常见的封装方式：

1. 创建一个通用的请求函数：

function request(url, options) { return axios.create(options).get(url); } 2. 使用 middleware 来处理请求：

const middleware = (req) => { req.headers['X-Request-ID'] = Date.now(); return req; }; 3. 定制请求方法：

axios.defaults.methods.myMethod = function (options) { return this.get(options.url, options); };

1.8 如何使用拦截器？

axios 提供了请求和响应的拦截器，用于自定义处理请求或响应：

- 请求拦截器：

axios.interceptors.request.use((config) => { config.headers['X-Custom-Header'] = 'custom-value'; return config; }); - 响应拦截器：

axios.interceptors.response.use((response) => { console.log('响应数据:', response.data); return response; });

上一篇：Node.js学习笔记

下一篇：二、bootstrap4基础（flex布局）

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！