API的封装_this.$api

API以前自己也尝试封装过但是看了老大的封装之后才发现自己封装得很臃肿,话不多说,还是来看一下老大是怎么封装的吧:

1.这是代理的设置,跟网上的没有什么量两样

 proxyTable: {
      '/portal2': {
        // 这是服务器的地址(下面的地址是我乱写得)
        target: 'http://120.00.000.000:0000',
        changeOrigin: true // 是否跨域
      }
    },
1
2
3
4
5
6
7

2.然后在src下面创建一个叫api的文件夹,并创建index.js,代码如下:

import axios from 'axios'
let baseUrl = '/portal2'

function $get (url, data = {}) {
  return axios.get(baseUrl + url, {params: data})
}

function $delete (url, data = {}) {
  return axios.delete(baseUrl + url, {params: data})
}

function $post (url, data = {}) {
  return axios.post(baseUrl + url, data)
}

function $put (url, data = {}) {
  return axios.put(baseUrl + url, data)
}
class Services {

 category = {
    all: data => $get('categories/', data), // 获取类目列表
    add: data => $post('categories', data), // 添加类目
    update: (must, data) => $put('categories' + must.categoryId, data), // 更新类目
    delete: (must, data) => $delete('categories' + must.categoryId, data) // 删除类目
  }
  
   area = {
    all: data => $get('/changeArea', data), 
    findById: data => $get('/getxxx', data), 
    findYnName: data => $get('/getxxx', data) 
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

3.然后在main.js挂载在全局

import Services from './api/index.js'

Vue.prototype.$api = new Services()
1
2
3

4.使用api

 this.$api.area .findById(data).then(res => { }) },
1