1.封装请求
uniapp 有api可以直接用来请求,uni.request(),为了方便,我使用文件套了一下,可以挂到事件总z线上,方便使用
/src/util/index.js
export default (url,data={},method='GET')=>{
return new Promise((resolve,reject)=>{
uni.request({
url:url,
data,
method,
success:res=>{
// debugger
resolve(res.data)
},
fail:err=>{
// debugger
reject(err)
}
})
})
}
需要发请求的时候,可以直接调用,但是我是在web端调试,app端看效果,所以我要耍弄双端都可以发请求,所以需要在main.js里面配置一下
2.配置基础路径
/src/main.js
// #ifdef H5
Vue.prototype.$baseUrl = "/api"
// #endif
// #ifdef APP-PLUS ||MP
Vue.prototype.$baseUrl = "http://192.168.1.2:3000"
// #endif
console.log(Vue.prototype.$baseUrl)
如果是h5的话,需要设置代理,否则会报跨域,因此设置baseurl为/api,然后在项目里设置一下代理,需要注意的是,这里的target必须写成ip,不能写成127.0.0.1或者localhost(具体原因我也不太清楚,实践得真理)
3.web端设置代理
manifest.json ——》源码——》h5
"h5" : {
"sdkConfigs" : {
"maps" : {
"qqmap" : {
"key" : "LEZBZ-S6GC3-CDZ3M-YZMOD-NPFP5-T4FIP"
}
}
},
"devServer" : {
"proxy" : {
"/api" : {
"target" : "http://192.168.1.2:3000",
"changeOrigin" : true,
"secure" : false,
"logLevel" : "debug",
"pathRewrite" : {
"^/api" : ""
}
}
},
"https" : false
}
}
4.发情求
这样web端的代理就配好了,可以开始发请求了
//因为我还没有把文件挂到事件总线上,所以我这样是引入进来的
import request from '../../utils/index.js'
async getList(){
// 手机端(没有跨域,所以在h5端设置的代理需要取消掉)
// let ceshiData =await request('http://192.168.1.2:3000/getCategoryDatas');
// h5端(有跨域所以需要代理)
// let ceshiData =await request('/api/getCategoryDatas');
//因为已经在main.js里面配置过$baseUrl了,所以直接拼接到一起就可以了
let ceshiData =await request(this.$baseUrl+'/getCategoryDatas');
console.log(ceshiData)
},
然后开始看效果
web端
app端
ok!成功啦~