js的axios和fetch用法

2024年2月1日发(作者：)

js的axios和fetch用法

一、概述

Axios 是一个基于 Promise 的 HTTP 库，可以在浏览器和

中使用。Fetch API 是另一个用于发送 HTTP 请求的

JavaScript 方法，它基于 WHATWG 的 Fetch 标准。在这篇文档中，我们将介绍 Axios 和 fetch 的用法，包括请求和响应的处理、错误处理、拦截请求和响应等。

二、Axios 库用法

1. 安装 Axios：可以通过 npm 安装 Axios 库，命令如下：`npm

install axios`

2. 基本用法：创建一个 Axios 实例，可以使用

`()` 方法，如下所示：

```javascript

const axios = require('axios').default;

```

3. 发起请求：使用 `()`、`()` 等方法发起 HTTP 请求，如下所示：

```javascript

('/user?ID=12345')

.then(function (response) {

// 处理响应数据

(response);

})

.catch(function (error) {

第 1 页 共 4 页

// 处理错误

(error);

});

```

4. 配置请求：可以通过配置参数来改变请求的方式、URL、请求头等信息，如下所示：

```javascript

axios({

method: 'get',

url: '/user/profile',

params: { ID: 12345 },

headers: { 'Content-Type': 'application/json' }

})

.then(function (response) {

// 处理响应数据

(response);

})

.catch(function (error) {

// 处理错误

(error);

});

```

5. 拦截器：可以使用拦截器来在请求被发送或响应被处理之前执行一些操作，例如添加自定义头或修改请求数据。

第 2 页 共 4 页

6. 错误处理：使用 `catch()` 方法可以捕获请求或响应过程中的错误，并进行相应的处理。

7. 返回 Promise：Axios 返回一个 Promise 对象，可以使用

`.then()` 和 `.catch()` 方法来处理成功和失败的情况。

8. 自动转换 JSON：Axios 会自动将 JSON 格式的响应数据转换为 JavaScript 对象。

9. 客户端支持：Axios 在浏览器中也有良好的支持，可以在浏览器中使用 `` 来访问 Axios 实例。

三、Fetch API 用法

1. 基本用法：创建一个新的 Fetch 实例，并使用 `fetch()` 方法发送一个 HTTP 请求，如下所示：

```javascript

fetch('/user/12345')

.then(response => ()) // 处理响应数据为

JSON 格式

.then(data => (data)) // 处理响应数据

.catch(error => ('Error:', error)); // 处理错误

```

2. 使用配置对象：可以传递一个配置对象给 `fetch()` 方法，用于配置请求的方式、URL、请求头等信息。

3. 手动设置 Promise：Fetch API 返回一个 Promise 对象，可以通过 `.then()` 和 `.catch()` 方法来处理成功和失败的情况。第 3 页 共 4 页

Fetch API 还提供了 `onheaders`、`onredirect` 等事件，可以在请求过程中监听事件。

4. 支持多种响应类型：Fetch API 可以处理多种响应类型，包括文本、JSON、ArrayBuffer 等。可以通过 `responseType` 属性来指定响应类型。

5. 支持 CORS：Fetch API 支持跨源资源共享（CORS），可以在服务器端配置 CORS 来允许跨域请求。

6. 浏览器支持：Fetch API 在现代浏览器中得到了广泛的支持，可以在浏览器中使用 `` 来访问 Fetch 实例。

四、总结

Axios 和 fetch 是 JavaScript 中常用的 HTTP 请求库，它们都提供了简单易用的 API 来发送 HTTP 请求。Axios 在浏览器和

中都有良好的支持，而 fetch 则更适合在浏览器中使用。在使用这些库时，需要注意配置请求、处理响应和错误、使用拦截器等事项。

第 4 页 共 4 页