Vue封装axios

预备知识:

vue,Promise

废话

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

正文开始 :

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

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

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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)
    }
    ...........
    }

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    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)
    }
    ...........
    }
所以,我不得不优化一下他:
  • 3 优化方法:

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        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
    })
    }

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

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

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

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

文章目录
  1. 1. 废话
  2. 2. 正文开始 :