vue项目api全局封装_this.$api

• 目录结构
  
• config.js文件配置

// 线上环境默认的配置
const defaultConfig = {
  apiHost: '地址',
  staticHost: ''
}

// 测试环境
const previewConfig = {
  apiHost: '地址',
  staticHost: ''
}

// 本地环境配置
const localConfig = {
  apiHost: '地址',
  staticHost: ''
}
let hostConfig = defaultConfig
if (process.env.NODE_ENV === 'development') hostConfig = localConfig

export default hostConfig.apiHost

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• fetch.js文件配置

import axios from 'axios'
import baseUrl from './config'
import qs from 'qs'
import { Message } from 'element-ui'
const instance = axios.create({
  baseURL: baseUrl,
  timeout: 30000,
  transformRequest: [
    function (data, headers) {
      // 对 data 进行任意转换处理
      return data
    }
  ],
  transformResponse: [
    function (data) {
      // 对 data 进行任意转换处理
      return data
    }
  ]
  // withCredentials: false // default
})

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 对发送请求的数据作处理
    if (!config.data) {
      config.data = {}
    }
    config.data = qs.stringify(config.data)
    return config
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    const resContent = JSON.parse(response.data)
    const { code, msg, data } = resContent
    switch (code) {
      case 0:
        Message.error({
          message: msg,
          time: 5 * 1000
        })
        return Promise.reject(msg)
    }
    if (code == 1 && msg) {
      Message.success({
        message: msg,
        time: 5 * 1000
      })
    }
    return data
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

function createAPI(url, method, data, $this, cancel) {
  let config = {}
  if (method === 'post' || method === 'POST') {
    config = {
      method: 'post',
      url,
      data
    }
  } else {
    config = {
      method: 'post',
      url,
      params: data
    }
  }
  return instance(config)
}

export default createAPI

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

• idnex.js文件配置

import LOGIN from './module/login'
import ACCOUNT from './module/account'


/**
 * 所有接口引用入口
 */
const apis = {
  ...LOGIN,
  ...ACCOUNT,
}
export default apis

1
2
3
4
5
6
7
8
9
10
11
12
13

• module文件夹下的js文件

/**
 * 登录模块
 */
import createAPI from '../fetch.js'

const LOGIN = {
  // 账号登录接口
  loginByUsername: (data, $this, cancel) => createAPI('/account/loginByAccount', 'post', data, $this, cancel),
  // 手机号登录接口
  loginByPhone: (data, $this, cancel) => createAPI('/account/loginByPhone', 'post', data, $this, cancel)
export default LOGIN
1
2
3
4
5
6
7
8
9
10
11

• main.js文件全局挂载api

import apis from '@/apis'
Vue.prototype.$apis = apis
1
2

• 页面接口调用

const userinfo = {
// 参数信息
}
this.$apis.loginByUsername(userinfo).then(res => {
// 返回信息
}
1
2
3
4
5
6