浅谈在Vue-cli里基于axios封装复用请求

下面是详细的讲解。

1. 前言

在Vue.js中，使用axios作为HTTP客户端发起请求已经成为很普遍的做法。而Vue-cli是一个著名的脚手架工具，提供了一个使用webpack来构建Vue.js项目的简洁CLI。Vue-cli在项目初始化过程中会使用axios模块。但是当我们需要为项目提供更好的API调用封装和复用能力时，我们需要在Vue-cli的基础上建立我们自己的API调用模块，封装和复用请求。

这里我们将简单介绍如何在Vue-cli中基于axios封装复用请求。同时，我们还将提供一些示例来说明如何实现。

2. 封装

我们可以创建一个api.js文件来保存所有API请求的封装，这个文件可以放在/src/api目录中。

首先，我们需要引入axios模块：

import axios from 'axios'

接下来，我们定义一个axios实例，这里我们也可以根据需求对实例进行一些自定义配置：

const service = axios.create({
  timeout: 5000, // 超时时间
  baseURL: process.env.BASE_API // 接口的baseUrl
})

我们可以在这个文件中定义一个封装的GET API接口，它接受两个参数url和params，并返回一个Promise：

export function get (url, params) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'get',
      params: params
    })
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

同样的，我们也可以定义封装的POST API接口：

export function post (url, data) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'post',
      data: data
    })
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

这两个封装的API接口可以满足我们大部分的请求需求。如果需要自定义其他的请求方式，只需在这个文件中增加相应的代码即可。

在我们完成API接口封装之后，我们需要把这些API接口暴露出来，以便其他模块可以使用。

export default {
  get,
  post
}

3. 复用

在任何需要调用API接口的组件中，我们可以通过导入API接口模块的方式来使用它们。

import api from '@/api/api'

假设我们在某一个组件中需要调用一个获取用户信息的请求，我们只需要调用/api/user接口，并传入相应的参数。

api.get('/api/user', { id: 1 }).then(response => {
  console.log(response)
})

如果我们在另一个组件中也需要调用获取用户信息的请求，我们只需再次调用/api/user接口即可。这样就可以实现请求的复用，从而不必在多个组件中单独定义相同的API调用函数。

4. 示例

这里我们使用Github API来作为示例，获取指定用户的Github上的公共仓库列表。

// 将封装后的http请求方法放在api.js文件中
import axios from 'axios'

const service = axios.create({
  timeout: 5000,
  baseURL: 'https://api.github.com/' // Github API的baseUrl
})

export function getGithubRepos (user) {
  return new Promise((resolve, reject) => {
    service({
      url: `/users/${user}/repos`,
      method: 'get'
    })
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

在任何需要调用Github API的组件中，我们可以通过导入API接口模块的方式来使用它们。

import api from '@/api/api'

export default {
  mounted () {
    // 调用API接口
    api.getGithubRepos('octocat').then(data => {
      console.log(data)
    })
  }
}

我们也可以在别的组件中调用这个API接口：

import api from '@/api/api'

export default {
  mounted () {
    // 调用API接口
    api.getGithubRepos('someuser').then(data => {
      console.log(data)
    })
  }
}

这样我们就实现了对Github API的封装和复用。