vue封装axios步骤

Vue封装Axios的步骤

在Vue项目中，使用Axios是非常常见的，它是一个基于Promise的HTTP库，可以用于发送异步请求。为了方便使用和管理，我们可以将Axios进行封装。下面是Vue封装Axios的步骤：

1. 安装Axios

在Vue项目中安装Axios。可以使用npm或者yarn进行安装。打开终端，进入项目根目录，执行以下命令：

npm install axios

或者

yarn add axios

2. 创建封装文件

在项目的src目录下，创建一个名为api.js（可以根据实际情况自定义命名）的文件，用于封装Axios。在该文件中，我们将创建一个Axios实例，并进行一些全局配置。

`javascript

import axios from 'axios';

// 创建Axios实例

const instance = axios.create({

baseURL: 'http://api.example.com', // 设置请求的基础URL

timeout: 5000, // 设置超时时间

});

// 请求

instance.interceptors.request.use(

(config) => {

// 在发送请求之前做些什么

return config;

},

(error) => {

// 对请求错误做些什么

return Promise.reject(error);

}

);

// 响应

instance.interceptors.response.use(

(response) => {

// 对响应数据做些什么

return response.data;

},

(error) => {

// 对响应错误做些什么

return Promise.reject(error);

}

);

export default instance;

在上述代码中，我们首先导入了Axios，并使用axios.create()方法创建了一个Axios实例。在实例中，我们可以进行一些全局的配置，比如设置请求的基础URL和超时时间。
接下来，我们使用instance.interceptors.request.use()方法添加了一个请求，用于在发送请求之前做一些处理，比如添加请求头信息。
然后，我们使用instance.interceptors.response.use()方法添加了一个响应，用于对响应数据进行处理，比如统一处理错误信息。
我们将该实例导出，以便在其他地方使用。
3. 使用封装的Axios
在需要发送请求的地方，我们可以直接引入并使用封装的Axios。比如，在Vue组件中，可以通过this.$http来访问封装的Axios实例。
`javascript
import api from './api.js';
export default {
  mounted() {
    // 发送GET请求
    api.get('/users')
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
      });
    // 发送POST请求
    api.post('/users', { name: 'Alice', age: 20 })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.error(error);
      });
  },
};

在上述代码中，我们首先引入了封装的Axios实例，并在mounted()生命周期钩子中使用了该实例发送了一个GET请求和一个POST请求。

通过以上步骤，我们成功地封装了Axios，并在Vue项目中使用了封装后的Axios实例，使得发送HTTP请求更加方便和管理。