vue中封装axios并实现api接口的统一管理

下面我来为你详细讲解“Vue中封装axios并实现API接口的统一管理”。

1. 为什么需要封装axios并实现API接口的统一管理

在使用axios请求数据时，我们通常需要在每个组件中都引入axios，并且在每个组件中都配置请求拦截器和响应拦截器，这样不仅重复代码多，而且容易出错，难以维护。同时，如果需要修改或新增一个接口，也需要在每个组件中进行修改，非常麻烦。因此，我们可以将axios进行封装，并实现API接口的统一管理，方便代码的维护和管理。

2. 封装axios

在Vue项目中，我们可以将axios进行封装，方便我们在组件中直接调用。以下是封装axios的步骤：

1) 安装axios

首先，我们需要安装axios:

npm install axios --save

2) 创建并配置axios实例

创建一个axios实例并配置它的全局配置（如：baseURL、超时时间等），可以参考以下代码：

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // API的base_url
  timeout: 10 * 1000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(config => {
  // 在请求发送之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  console.log(error);
  return Promise.reject(error);
});

// 响应拦截器
service.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response.data;
}, error => {
  // 对响应错误做点什么
  console.log(error);
  return Promise.reject(error);
});

export default service;

在上面的代码中，我们创建了一个名为“service”的axios实例，并在其中配置了全局配置、请求拦截器和响应拦截器。其中，“baseURL”是API的baseurl，timeout表示请求超时时间。请求拦截器中的“config”参数表示axios请求配置信息，可以在此处如加一些特定的请求配置。响应拦截器中的“response”参数表示axios响应数据，可以在此处对响应数据进行处理再返回给组件。

3) 在main.js中注册axios实例

在main.js中全局注册封装好的axios实例，代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import service from './utils/request'

Vue.prototype.$http = service;

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这样，我们就完成了axios的封装。

3. 实现API接口的统一管理

在封装好axios之后，我们可以实现API接口的统一管理。对于一个API接口，我们可以将其独立出来，放置在一个api.js或apis.js文件中，并通过导出的方式进行统一管理，以下是示例代码。

示例1：获取用户信息API

import request from '@/utils/request'

// 获取用户信息API
export function getUserInfo(params) {
  return request({
    url: '/user/info',
    method: 'get',
    params
  })
}

在上面的代码中，我们定义了一个名为“getUserInfo”的API接口，其请求地址为“/user/info”，请求方法为“get”，并通过“params”参数来传递请求参数，最后返回一个axios请求结果。

示例2：更新用户信息API

import request from '@/utils/request'

// 更新用户信息API
export function updateUserInfo(data) {
  return request({
    url: '/user/update/info',
    method: 'post',
    data
  })
}

在上面的代码中，我们定义了一个名为“updateUserInfo”的API接口，其请求地址为“/user/update/info”，请求方法为“post”，并通过“data”参数来传递请求数据，最后返回一个axios请求结果。

在这两个示例中，我们分别实现了获取用户信息和更新用户信息的API接口，并在封装好的axios实例中进行处理，于是我们在Vue组件中使用这些API只需要访问定义的API即可，如下所示：

import { getUserInfo, updateUserInfo } from '@/api'

export default {
  name: 'MyComponent',

  created: function () {
    this.getUserInfo()
  },

  methods: {
    getUserInfo() {
      getUserInfo({
        userId: '123456'
      }).then(res => {
        // 处理用户信息
      })
    },

    updateUserInfo(data) {
      updateUserInfo(data).then(res => {
        // 更新用户信息
      })
    }
  }
}

这样，我们就可以在Vue组件中直接访问API接口，并调用API接口来实现对后端接口的访问，简单易用和管理。