Vue 封装Axios

步骤一：Axios配置文件

1.创建Axios实例

2.给实例添加请求拦截器、响应拦截器

3.编写创建Api方法，暴露该创建Api方法

Axios配置文件的内容就是以上三步，其他文章和项目，配置文件都是大同小异，大致都是以上内容。

以下是一整个配置文件的代码：

// 引入Axios
import axios from 'axios'
// 引入qs，不知道的同学请鼠标右键问AI（如果你的浏览器有Ai插件的话）
import qs from 'qs'

// baseUrl 每个人的项目都不同，Vue默认的是'/api'，在vueConfig.js文件可以查看。
const baseUrl = '/api'

// 创建一个axios实例
const instance = axios.create({
  baseURL: baseUrl,
  // 超时时间
  timeout: 30000,
  // 转换请求处理
  transformRequest: [
    function (data, headers) {
      // 对 data 进行任意转换处理
      return data
    }
  ],
  // 转换响应处理
  transformResponse: [
    function (data) {
      // 对 data 进行任意转换处理
      return data
    }
  ]
})

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 对发送请求的数据作处理
    if (!config.data) {
      config.data = {}
    }
    config.data = qs.stringify(config.data)
    return config
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    const resContent = JSON.parse(response.data)
    const { code, msg, data } = resContent
    switch (code) {
      case 0:
        return Promise.reject(msg)
    }
    // eslint-disable-next-line no-empty
    if (code === 1 && msg) {}
    return data
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

// 创建Api方法
function createAPI (url, method, data) {
  let config = {}
  if (method === 'post' || method === 'POST') {
    config = {
      method: 'post',
      url,
      data
    }
  } else {
    config = {
      method: 'get',
      url,
      params: data
    }
  }
  return instance(config)
}

// 将创建Api方法暴露出去
export default createAPI

步骤二：分模块的创建Api

  你的项目会有很多模块，例如：登录注册、首页、文章创作、推荐文章列表等等，如果你把所有不同模块的Api都放在一个Js文件中，那以后维护起来，就太过于灾难了，也不规范。

所以我们要把不同模块的Api都放到对应的Js文件中，以后维护起来，就会轻松的找到对应的Api。

例如，把登陆注册的Api就放在login.js文件中，把文章相关的Api就放在article.js中。

如下图：

具体编写Api示例：

// 这是一个Api的Js示例
// 引入我们在上一个步骤中创建的Axios配置文件，暴露出来的创建Api方法
import createAPI from '../config.js'

// 定义该模块的Api
const ARTICLE = {
  // 从左往右依次是：方法名、请求参数、路径、请求方式、请求参数。 一眼就能看明白吧，不用多说，很简单.
  // 初始化文章编辑
  initArticleEdit: (data) => createAPI('/article/initEdit', 'get', data),

  // 新建文章保存
  saveNewArticle: (data) => createAPI('/article/saveArticleCreate', 'post', data)
}
// 暴露该模块Api
export default ARTICLE

步骤三：在index.js中引入各模块的Api

我们要把上一步骤中，分模块编写的Api，引入到一个index.js文件中，方便第四个步骤，挂载到Vue原型上。  

具体文件代码如下：

import LOGIN from './module/login'
import ARTICLE from './module/article'

/**
 * 所有接口引用入口
 */
const apis = {
  ...LOGIN,
  ...ARTICLE
}
export default apis

至此，完整的封装Axios的文件目录如下：

一张干净的不带标注的截图：

步骤四：挂载到Vue原型上

在你Vue项目中的main.js文件中，将封装好的Api挂载到Vue原型上，方便在页面组件中调用。

代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 因为我封装Axios的文件夹命名是api（上一步骤截图中），所以在这引入是这样写，你的命名是什么就写什么。
import api from '@/api'

Vue.config.productionTip = false
// 挂载到Vue原型上
Vue.prototype.$api = api

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

步骤五：在页面中调用

简简单单如截图所示：

这样就可以在页面中，通过this.$api.你的Api名字，来调用了。

最后总结

  没什么好说的，十分基础的东西，介绍给刚学习的同学们。网上还有其他的封装方式，也可以学一学，或许比我这个更简单，更高效，更适用。

有不同意见，欢迎在评论区留言，一起交流探讨，共同进步。