uniapp在h5端和app端发请求流程

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！成功啦~