Vue二次封装axios为插件使用详解

下面是“Vue二次封装axios为插件使用详解”的完整攻略。

什么是axios

axios 是一个常用的基于 promise 的HTTP 库，可以用于浏览器和 node.js 中。它支持浏览器 XHR 请求和 Node.js http 请求。

为什么要二次封装axios

在实际开发中，我们经常会遇到 HTTP 请求的封装问题，不仅需要统一处理 HTTP 请求的异常和错误，还需要请求的拦截和校验。因此，我们需要对axios进行二次封装。

Vue二次封装axios为插件的流程

1. 新建 request.js文件用于二次封装axios，可以在request.js中统一处理请求的配置、请求前、响应后的处理逻辑等。

```
import axios from 'axios';
import QS from 'qs';

// axios默认配置
axios.defaults.timeout = 10000; // 10s的超时时间
axios.defaults.baseURL = '';

// 请求拦截器
axios.interceptors.request.use(
config => {
// 处理请求数据
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};
return config;
},
error => {
// 请求错误处理
return Promise.reject(error);
}
);

// 响应拦截器
axios.interceptors.response.use(
response => {
// 响应数据处理
return response;
},
error => {
// 响应错误处理
return Promise.reject(error);
}
);

export default axios;
```

1. 新建 http.js 文件将 request.js 改造成 Vue 插件引入的形式。

```
import axios from ./request.js";

const http = {};
http.install = function (Vue, options) {
// 设置基础url
axios.defaults.baseURL = options.baseURL ? options.baseURL : '';
// 提供Vue.http (this.$http)方法调用axios
Vue.prototype.$http = axios;
};

export default http;
```

1. 安装插件

```
npm install axios qs --save

// 也可以通过 cdn 引入

```

1. 在 main.js 中引入并安装 http 插件

```
import http from './http.js';

Vue.use(http, {
baseURL: 'http://localhost:8080'
});
```

示例说明

1. GET请求的示例

```

```

1. POST请求的示例

```

```

希望这个攻略能够帮助到大家。