步骤:
-
在目录上新建一个utils文件夹
-
在文件夹内新建一个requset.js文件
-
封装函数
-
在main.js中Vue.use()注册全局
封装函数
const baseURL = '' //基地址
async function request({url,header={},data,method='get'}){
uni.showLoading({
title:'加载中' // 添加交互
})
const res = await uni.request({
url: baseURL + url,
method,
header,
data
})
uni.hideLoading() // 关闭提示
// console.log(res)
if(res.data.meta.status === 200) { // 此处的状态码根据后端返回数据而定
return {
data: res.data,
msg: res.data.msg
}
}else{
return Promise.reject(res.data.msg) // 请求错误的时候,抛出一个错误
}
}
export default { // 导出一个install方法
install(Vue){
Vue.prototype.request = request
}
}
在main.js里面进行引入
import request from '@/utils/request.js' //引入request.js文件
Vue.use(request)
// Vue.use() 会自动执行里面的install方法 ,所以需要request 导入一个install方法
// 如果你不想用Vue.use(),你也可以在requset.js中直接导出requset,
// 在main.js引入之后,挂载到原型上即可
// Vue.prototype.request = request // 挂载到全局this
前段时间朋友在写uni-app相关的项目,随便给他封装了一个请求函数,希望也可以帮到大家!!!