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

项目下的目录肯定有一个 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/

Logo

前往低代码交流专区

更多推荐