uniapp封装api请求方式一_uniapp前端api请求封装

1、先创建文件夹api，包含index.js、request.js（users.js文件是用于封装某个模块的请求，例如我的、首页、新闻页等等）

2、打开request，将以下代码放入其中

const http = {
  // baseUrl 地址
  baseUrl: 'https://tst-api.scachealth.com',
  // 请求方法
  request(config) {
    // config: 请求配置对象，具体的值参照uniapp文档
    config = beforeRequest(config)
    config.url = this.baseUrl + config.url
    // 创建一个promise对象，在里面发送请求
    return new Promise((resolve, reject) => {
      uni.request(config).then(res => {
        let [error, resp] = res
        const response = beforeResponse(resp)
        resolve(response)
      }).catch(err => {
        errorHandle(err)
        reject(err)
      })
    })
  },
  get(url, data, auth = true) {
    /*
      url: 请求地址
      data: 请求数据
      auth: 请求是否需要携带token进行认证, 默认需要token，不需要则传入false
    */
    return this.request({
      url: url,
      data: data,
      auth: auth,
      method: 'GET',
    })
  },
  post(url, data, auth = true) {
    /*
      url: 请求地址
      data: 请求数据
      auth: 请求是否需要携带token进行认证, 默认需要token，不需要则传入false
    */
    return this.request({
      url: url,
      data: data,
      auth: auth,
      method: 'POST',
    })
  },
}

// 请求拦截器
const beforeRequest = (config) => {
  // 请求之前的做的操作
  let token = uni.getStorageSync('token')
  config.header = {}
  if(config.auth) { // 如果congfig.auth 有值，说明需要token认证
    if(!token){
      // 没有登录，无访问权限，需要去登录
      return uni.navigateTo({
        url: '/pages/user/login'
      })
    }
    // 在请求头中添加一个token
    config.header['Authorization'] = 'Bearer ' + token
    return config
  }
  return config
}

// 响应拦截器
const beforeResponse = (response) => {
  let res = response.data
  // 判断token是否过期，过期则将本地token清空，跳转到登录页
  switch (res.code) {
    case 400:
      uni.clearStorageSync() // 清空本地所有缓存
      uni.navigateTo({ // 跳转至登录页
        url: '/pages/user/login'
      })
      uni.showToast({ // 提示用户
        title: '登录状态已过期，请重新登录',
        duration: 1500,
        icon: "none"
      })
      return
    case 1000:
      uni.showToast({ // 提示用户
        title: res.msg,
        duration: 1500,
        icon: "none"
      })
      return
    case 10000:
      uni.clearStorageSync() // 清空本地所有缓存
      uni.navigateTo({ // 跳转至登录页
        url: '/pages/user/login'
      })
      uni.showToast({ // 提示用户
        title: '登录状态已过期，请重新登录',
        duration: 1500,
        icon: "none"
      })
      return
    case 10030:
      return uni.showToast({
        title: res.msg,
        duration: 1500,
        icon: "none"
      })
    default:
      return res
  }
}

// 异常处理
const errorHandle = (err) => {
  
}

export default http
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

3、打开index.js，封装具体请求，将其他模块页面请求导入进来

// 封装具体的接口调用
import users from './users.js'
export default {
  users
}
1
2
3
4
5

4、uses.js文件中的内容

// 用户模块接口请求
import http from './request.js'
export default {
  // 登录接口
  login(data) {
    return http.post('/api/user/login', data, false) // false是因为登录不需要token
  }
}
1
2
3
4
5
6
7
8

5、将api挂载到全局，打开main.js文件，将以下代码放入

// 导入封装的请求对象
import api from './api/index.js'
Vue.prototype.$api = api
1
2
3

6、在页面中使用

let loginForm = { // 参数
	phone: '139xxxxxxx',
	smsCode: 13525,
}
const res = this.$api.users.login(loginForm)
1
2
3
4
5