uni-app请求文件封装

1.h5端配置manifest.json文件

// 代码设置跨域
"devServer" : {
            "https" : false,
            "proxy" : {
                "/api" : {
                    "target" : "http://pets.wgzero.com/api",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/api" : "/"
                    }
                }
            }
        }

2.条件编译： 从上到下执行

let urlAll = null
urlAll = baseUrl + url
// #ifdef H5
urlAll = url
// #endif

3.request.js文件

// request.js
let baseUrl = "http://pets.wgzero.com"
export default class Request {
	http(param) {
		console.log("xx", param)
		//拼接完整请求地址
		let url = param.url,
			method = param.method,
			header = {},
			data = param.data || {},
			token = param.token || "",
			hideLoading = param.hideLoading || false;
		//请求方式:GET或POST(POST需配置
		let urlAll = null
		urlAll = baseUrl + url
		 // #ifdef H5
		 urlAll = url
		 // #endif
		 
		 console.log("urlAll", urlAll)
		// header: {'content-type' : "application/x-www-form-urlencoded"},)
		if (method) {
			method = method.toUpperCase(); //小写改为大写
			if (method == "POST") {
				header = {
					'content-type': "application/x-www-form-urlencoded"
				};
			} else {
				header = {
					'content-type': "application/json"
				};
			}
		}
		
		// token保存
		// if(token){
			
		// }else{
			
		// }

		//加载圈
		if (!hideLoading) {
			uni.showLoading({
				title: '加载中...'
			});
		}

		// 返回promise
		return new Promise((resolve, reject) => {
			// 请求
			uni.request({
				url: urlAll,
				data: data,
				method: method,
				header: header,
				success: (res) => {
					console.log("axios", res)
					// 判断 请求api 格式是否正确
					if (res.statusCode && res.statusCode != 200) {
						uni.showToast({
							title: "api错误" + res.errMsg,
							icon: 'none'
						});
						return;
					}
					// code判断:200成功,不等于200错误
					if (res.data.code) {
						if (res.data.code != '200') {
							uni.showToast({
								title: "" + res.data.msg,
								icon: 'none'
							});
							return;
						}
					} else {
						uni.showToast({
							title: "code!=200" + res.data.msg,
							icon: 'none'
						});
						return;
					}
					// 将结果抛出
					resolve(res.data)
				},
				//请求失败
				fail: (e) => {
					uni.showToast({
						title: "" + e.data.msg,
						icon: 'none'
					});
					resolve(e.data);
				},
				//请求完成
				complete() {
					//隐藏加载
					if (!hideLoading) {
						uni.hideLoading();
					}
					resolve();
					return;
				}
			})
		})
	}
}

4.http.js文件

import Request from '../request/index.js'
let request = new Request().http

//全局定义请求头
export default {
    // 请求样式
    getBanner: function(data) {
        return request({
            url: "/api/getBanner", //请求头
            method: "GET", //请求方式
            data: data, //请求数据
        })
    },
	getDetail: function(data) {
	    return request({
	        url: "/api/getCategoryDetail", //请求头
	        method: "POST", //请求方式
	        data: data, //请求数据
	    })
	},
}

5.main.js里面引用+页面使用

// 引入请求文件
import http from "./http/http.js"
Vue.prototype.$http = http
// 页面使用
handleClickPost(){
				let data = {
					id: 1,
					pid: 1
				}
				this.$http.getDetail(data).then(res => {
					console.log("post", res)
				})
			},