|
1、先创建文件夹api，包含index.js、request.js（users.js文件是用于封装某个模块的请求，例如我的、首页、新闻页等等）  2、打开request，将以下代码放入其中
const http = {
// baseUrl 地址
baseUrl: '',
// 请求方法
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 && token) { // 如果congfig.auth 有值，说明需要token认证
// 在请求头中添加一个token
config.header['Authorization'] = 'Bearer ' + token
}else {
// 没有登录，无访问权限，需要去登录
uni.navigateTo({
url: '/pages/user/login'
})
}
return config
}
// 响应拦截器
const beforeResponse = (response) => {
// 判断token是否过期，过期则将本地token清空，跳转到登录页
if(response.code == 400) {
uni.clearStorageSync() // 清空本地所有缓存
uni.navigateTo({ // 跳转至登录页
url: '/pages/user/login'
})
uni.showToast({ // 提示用户
title: '登录状态已过期，请重新登录',
duration: 1500,
icon: "error"
})
}
return response
}
// 异常处理
const errorHandle = (err) => {
}
3、打开index.js，封装具体请求，将其他模块页面请求导入进来
// 封装具体的接口调用
import users from './users.js'
export default {
users
}
4、uses.js文件中的内容
// 用户模块接口请求
import http from './request.js'
export default {
// 登录接口
login(data) {
return http.post('/api/user/login', data, false) // false是因为登录不需要token
}
}
5、将api挂载到全局，打开main.js文件，将以下代码放入
// 导入封装的请求对象
import api from './api/index.js'
Vue.prototype.api = api
6、在页面中使用
let loginForm = { // 参数
phone: '139xxxxxxx',
smsCode: 13525,
}
const res = this.$api.users.login(loginForm)
|