vue封装axios | biubu.cn

预备知识:
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()来调用;这样,就不会有那么多烦心事了.

# 废话

# 正文开始 :

废话

正文开始 :