预备知识:

vue,Promise

废话

最近一直在使用 vue 开发;既然前后端分离的项目就少不了请求接口,当然了,使用 vue 请求接口首选 axios 了;当项目完成了之后在会过头来看,接口这一块的确是重复了大量的代码.于是就在想,能不能有办法来避免这种重复的劳动了, 当然,肯定是有办法的,不然就没有这篇文章了.

正文开始 :

网上关于axios 的是用方式有多种,我最开始接触的是把 axios 绑定在$https上的;在proxyTable 字段下配置的都有,就不再赘述了.我主要是记录我怎么处理的:

  • 1 首先在src 目录下建立一个lib 目录,在lib目录下面新建一个api.js ,是这样写的:

    import axios from 'axios';
    const ajaxUrl =  'http://localhost:8080/'
    axios.defaults.baseURL = ajaxUrl;
    
    1
    2
    3

    通过以上几步;axios 的所有请求就都是以 ajaxUrl 为基准的,不同的接口,在做不同的处理;

  • 2 封装一个 fectch ( )方法:接收两个参数, 分别是:接口的地址和要请求接口所需的参数,关于Promise(),这里再不废话,看我之前的博客或者自己谷歌一下.

    let fetch = (url, params) => {
        return new Promise ((resolve,rejected)=>{
            axios.post(url,params).then(result => {
                resolve(result);
            },reason => {
                rejected(reason)
            })
        })
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    准备工作完成,然后开始接口部分,比如有以下几个接口:

    export default {
        getList(params){
          return fetch('api/list',params)
        },
        getInfo(params){
          return fetch('api/info',params)
        }
      ...........
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    得亏之前做的项目接口不多,才有20几个,这要是在复杂一点,估计写接口都得好多工作量.所以,最后会有一个很大的api.js,到此为止,api.js是这样的:

    import axios from 'axios';
    const ajaxUrl =  'http://localhost:8080/'
    axios.defaults.baseURL = ajaxUrl;
    let fetch = (url, params) => {
            return new Promise ((resolve,rejected)=>{
                axios.post(url,params).then(result => {
                    resolve(result);
                },reason => {
                    rejected(reason)
                })
            })
        }
      
    export default {
        getList(params){ // 获取列表
           return fetch('api/list',params)
        },
        getInfo(params){ // 获取详情
           return fetch('api/info',params)
        }
        ...........
      }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    所以,我不得不优化一下他:

  • 3 优化方法:

    我定义一个方法,就叫getData();这个方法就是用来请求接口数据,并且只用这一个方法来请求接口;

    export default {
        getData(api,params){
          return fetch('api/'+api,params)
      }
    }
    
    1
    2
    3
    4
    5

    然后我们在其他地方使用的时候,是不是先得导入:

      import API from './api.js';
    // 比如在mounted里面请求数据: 
    mounted(){
        API.getData('list',{data:'listData'})
        .then(result => {
              console.log(result);
            // do something
        },reason => {
              console.log(reason);
            // handle errors
        })
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    通过getData的第一个参数来控制请求不同的接口,这样岂不是很方便?你觉得呢?

    这样貌似是可行,但是,只要有网络请求的地方你是不是都得 import 一下,这岂不是要命了.还有更简洁的做法. 在 main.js 中引入,绑定到Vue 的实例上面,这样就可以全局用了,不用每次用都 import 一下.

     	// main.js 
     	import API from './lib/api.js'
     	Vue.prototype.$getData = API.getData;
    
    1
    2
    3

    在vue组件中, 通过this.$getData()来调用;这样,就不会有那么多烦心事了.

Last Updated: 2021/11/28 上午12:58:10
Contributors: biubu