axios如何封装exe

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 环境中。封装 axios 可以让我们更轻松地管理 HTTP 请求、错误处理及提高代码的可复用性。以下是一份详细的 axios 封装教程。

## 1. 安装与引入

首先，使用 npm 或 yarn 安装 axios：

```bash

npm install axios --save

# 或者

yarn add axios

```

在项目中引入 axios 模块：

```javascript

import axios from 'axios';

```

## 2. 创建 axios 实例

创建一个 axios 实例，可以对其进行自定义配置：

```javascript

const instance = axios.create({

baseURL: 'https://api.example.com',

timeout: 5000,

headers: {

'Content-Type': 'application/json'

}

});

```

## 3. 请求和响应拦截器

拦截器允许在请求发出之前或响应返回之前对数据进行一定的处理。例如，可以在请求拦截器中添加统一的身份验证信息，或者在响应拦截器中统一处理错误。

### 3.1. 请求拦截器

```javascript

instance.interceptors.request.use(

(config) => {

// 在此处添加身份验证信息，例如 token

config.headers.Authorization = `Bearer ${localStorage.getItem('access_token')}`;

// 返回经过处理的 config 对象

return config;

},

(error) => {

// 请求发生错误时的处理

console.log(`Request error: ${error}`);

return Promise.reject(error);

}

);

```

### 3.2. 响应拦截器

```javascript

instance.interceptors.response.use(

(response) => {

// 对响应结果进行处理，例如清除无用的数据包装

return response.data;

},

(error) => {

// 对响应发生错误时的处理

console.log(`Response error: ${error}`);

return Promise.reject(error);

}

);

```

## 4. 封装请求方法

为了使代码更实用，我们可以将常用的请求方法（例如 GET、POST、PUT、DELETE 等）封装成一个 api 模块。

```javascript

const api = {

get(url, params) {

return instance.get(url, { params });

},

post(url, data) {

return instance.post(url, data);

},

put(url, data) {

return instance.put(url, data);

},

delete(url, params) {

return instance.delete(url, { params });

}

};

```

这样，我们可以在其他文件中简单地使用以下方式调用已封装的 API：

```javascript

// 引入 api 模块

import api from './path/to/your/api';

// 调用封装好的 get 请求方法

api.get('/users', { page: 1, limit: 10 });

// 调用封装好的 post 请求方法

api.post('/users', { name: 'John', age: 30 });

```

通过对 axios 的封装，我们可以轻松地管理请求，统一处理错误，提高代码的可维护性和可读性。这份教程为您提供了 axios 封装的基本思路，您可以根据自己的项目需求进行适当调整。