uniapp接口请求封装
//功能:暴露接口 判断是开发模式 development 开发模式 product 生产模式
const url=process.env.NODE_ENV=='development'?'/dpc':'http://xx.xx.xx.xx:8787';
export const myRequest = (options) => { //暴露一个function:myRequest,使用options接收页面传过来的参数
return new Promise((resolve, reject) => { //异步封装接口,使用Promise处理异步请求
uni.request({ //发送请求
url: url + options.url, //接收请求的API
method: options.method || 'GET', //接收请求的方式,如果不传默认为GET
header: {
'content-type': 'application/x-www-form-urlencoded',
}, //post要添加header
data: options.data || {}, //接收请求的data,不传默认为空
sslVerify:false,
success: (res) => { //数据获取成功
/*
if (res.data.meta.status !== 200) { //因为200是返回成功的状态码,如果不等于200,则代表获取失败,
return uni.showToast({
title: "数据获取失败!"
})
}
*/
resolve(res) //成功,将数据返回
},
fail: (err) => { //失败操作
console.log(err)
uni.showToast({
title: "请求接口失败!"
})
reject(err)
}
})
})
}
/*下面代码不作用途:仅参照演示,模仿页面调用函数,将实参传进myRequest,也就是上面myRequest使用(options)接收。
myRequest({
url: '/getInfo',
method: 'POST',
})
*/
main.js引入
import {myRequest} from './util/api.js'
Vue.prototype.$myRequest = myRequest
解决跨域
module.exports = {
devServer:{
port:'8080',
disableHostCheck:true,
proxy:{
'/dpc':{
target:'http://xx.xx.xx.xx:8787',
changeOrigin:true,
pathRewrite:{
'^/dpc': ''
}
}
}
}
}
组件应用
async getSwiper(obj){
const res = await this.$myRequest({//调用封装好的API请求函数
url:'/sys.php',//把接口传过去
method:'POST',
data:obj //传参数
})
//这里只需要传入不同的接口地址就可以
console.log(res.data);
},