封装规范和vue中的差不多,都是统一封装成一个request对象,然后在api.js里面调用。
先创建一个utils文件夹,然后里面创建一个request.js,代码如下:
export const baseURL = '基础url地址'
const request = (options) => {
// 判断是不是完整的地址,不是的话,拼接上baseUrl
let urlPath = ""
if (options.url.indexOf("http") === -1) {
urlPath = baseURL + options.url
} else {
urlPath = options.url
}
console.log("请求的url是:", urlPath);
return new Promise((resolve, reject) => {
uni.request({
url: baseURL + options.url, //接口地址:前缀+方法中传入的地址
method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET”
data: options.data || {}, //传递参数:传入的参数或者默认传递空集合
header: {
'token': uni.getStorageSync("token") || "" //自定义请求头信息
},
success: (res) => {
// 成功返回
console.log("返回数据:", res)
resolve(res.data.response_data)
},
// 这里的接口请求,如果出现问题就输出接口请求失败
fail: (err) => {
console.log("请求错误:", err)
reject(err)
}
})
})
}
export default request
在api文件夹中封装对应的index.js文件,然后导入request对象:
import request from '@/utils/request'
export default {
getUUID(data) {
console.log("getUUID");
return request({
url: '/user/wxapp',
method: 'get',
data,
})
},
changeStatus(data) {
return request({
url: '/message/isReads',
method: 'post',
data,
})
},
getMsgType(params) {
return request({
url: '/message/messageType',
method: 'get',
params,
})
},
deleteMsg(data) {
return request({
url: '/message/delete',
method: 'post',
data,
})
},
}
在对应的vue或者react中引入并调用: