vue axios二次封装

实现Vue Axios二次封装

作为一名经验丰富的开发者，我将为你解释如何实现Vue Axios二次封装。这将使你能够更好地管理HTTP请求，并提供一种统一的方式来处理请求和响应。

一、流程概述

在进行二次封装之前，我们先来了解一下整个流程。下面是一个简单的表格，展示了实现Vue Axios二次封装的步骤：

现在，我们将一步一步地实现这些步骤。

二、创建封装后的Axios实例

首先，我们需要创建一个封装后的Axios实例，以便在整个项目中使用。在你的项目中的某个地方，创建一个api.js文件，并添加以下代码：

import axios from 'axios';

const instance = axios.create({
  baseURL: ' // 设置基础URL
  timeout: 5000, // 设置请求超时时间
});

export default instance;

这段代码使用了Axios的create方法，创建了一个名为instance的实例。你可以根据自己的需要设置基础URL和请求超时时间。

三、添加请求拦截器

下一步是添加请求拦截器。请求拦截器可以用来在发送请求之前进行一些操作，例如添加token、设置请求头等。在api.js文件中，添加以下代码：

instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'Bearer ' + getToken(); // 添加token
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

这段代码使用了Axios的interceptors方法，添加了一个请求拦截器。你可以根据自己的需要在config对象中添加一些额外的配置。

四、添加响应拦截器

接下来是添加响应拦截器。响应拦截器可以用来在接收到响应之后进行一些操作，例如统一处理错误信息等。在api.js文件中，添加以下代码：

instance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

这段代码使用了Axios的interceptors方法，添加了一个响应拦截器。在这个例子中，我们只是简单地返回响应数据的data属性，你可以根据自己的需要进行更复杂的处理。

五、将封装后的Axios实例添加到Vue的原型中

现在，我们将封装后的Axios实例添加到Vue的原型中，以便在整个项目中使用。在main.js文件中，添加以下代码：

import Vue from 'vue';
import api from './api';

Vue.prototype.$api = api;

这段代码将封装后的Axios实例（api）添加到了Vue的原型中，你可以使用this.$api在任何Vue组件中发送请求。

六、使用封装后的Axios实例发送请求

现在，你已经完成了Vue Axios的二次封装。你可以在任何Vue组件中使用this.$api来发送请求。以下是一个示例：

export default {
  methods: {
    fetchData() {
      this.$api.get('/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
}

以上代码使用了封装后的Axios实例的get方法发送了一个GET请求，并在then和catch中处理了响应