[JavaScript知识库]Vue项目中 axios 二次封装

?参考了一些博客，以及正在做的项目，总结了一下，适合自己的代码。方便后期的代码开发！！！，小伙伴们有需要的可以拿去哈！

项目下的目录肯定有一个 api 文件，对吧，先新建 axios.js 文件，上手写代码。axios 的话，是存放 axios 拦截器代码的 ，以及而二次封装好的代码；然后api 文件的话了，就是存放接口的文件。

首先的话，肯定是引入 axios 包，qs 的话，是 axios 内部已经有的包了吗，不用再次下载了，它的一个作用的话，是将请求的参数序列化，然后以 & 的形式拼接到 url 的后面。

1. 这是axios.js 文件

   import axios from 'axios'                    // 首先的话，引入 axios 库，拦截器的话，这里没
                                                // 有，得自己去 axios 的上复制一下，下面配上连接
   import qs form 'qs'
   
   function http(method, url, data, config) {
     return new Promise((reslove, reject) => {
       if (method == 'get') {
         axios.get(url, {
           params: data,
           ...config,
         }).then((response) => {
           reslove(response)
         }).catch((response) => {
           reject(response)
         })
       }else if (method == 'post') {  // 这里的格式是 form 格式的，不是 JSON 格式的
           axios.options(url, {        // JSON 的话，可以直接对 axios 的请求头进行设置，
           ...qs.stringify(data),      // axios.defaults.headers.post['Content-Type'] =                               'application/json';
           ...config,
           }).then((response) => {
             reslove(response)
           }).catch((response) => {
             reject(response)
           })
         } else {
         axios({
           method,
           url,
           data,
           ...config
         }).then((response) => {
           reslove(response)
         }).catch((response) => {
           reject(response)
         })
       }
     })
   }
   const Axisos= {
     get: (url, data, config) => http('get', url, data, config),
     post: (url, data, config) => http('post', url, data, config),
     options: (url, data, config) => http('options', url, data, config),
   
     put: (url, data) => http('put', url, data),
     patch: (url, data) => http('patch', url, data),
     delete: (url, data) => http('delete', url, data), 
     all: (requestArr) => http.all(requestArr),  // 处理并发请求
   }
   // 最后的话，是将二次封装好的 Axios 暴露出去
   export { Axios }

2. 其次的话，就是 api.js 文件了，这个文件是专门用来存放接口的信息的，统一的存放再一起的话，方便修改。

   import { Axios } from 'api/axios'
   
   class Api {
         //测试接口, 这里的话，是返回了一个 Promise 对象。
         async getTest(data) {
           return await Axios.get('/test', data).then((res) => res)
        }
   }
   // 然后将这个 类暴露出去，接着就是挂载到全局的Vue 上，就可以每一个页面中调用接口，
   export default new Api()

3. 最后的话就是将定义的这个类暴露出去，并且挂载到 Vue 上就可以啦

   import api from './api/api.js'
   // 挂载到全局 Vue 上
   Vue.prototype.$api = api

   是不是有点疑问了，为啥，暴露出来的是一个 类，但是引入的时候，是一个 api ；其实这里的话，可以形象的理解成 这个 api 其实就是 Api 这个类，等价与这个类，保存的是同一个指针，也就是指向的都是同一个 堆内存中开辟的空间。

?这里代码没有贴完，只有一部分，剩余的代码，需要自己去 axios 上进行复制粘贴的！！！！
?axios 中文文档：http://www.axios-js.com/