UNIAPP的request请求封装

request.js代码

import $store from "@/store/index.js";

export default{
	common:{
		baseUrl:"你的url",
		header:{
			'Content-Type':'application/json;charset=UTF-8',
		},
		data:{},
		method:"GET",
		dataType:'json'
	},
	request(options={}){
		//组织参数
		options.url=this.common.baseUrl+options.url
		options.header=options.header||this.common.header
		options.data=options.data||this.common.data
		options.method=options.method||this.common.method
		options.dataType=options.dataType||this.common.dataType
		
		//token验证
		if(options.token){//如果开发者写的接口请求token:true
			options.header.token=$store.state.user.token
			//二次验证（防止token为空，也去访问服务器）
			if(options.checkToken&&!options.header.token){
				uni.showToast({
					title: '请先登录',
					icon:"none"
				});
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		}
		
		
		//请求
		return new Promise((res,rej)=>{
			//请求之前...todo
			//请求中
			uni.request({
				...options,
				success: (result) => {
					//返回原始数据(请求中携带native)
					if(options.native){
						return res(result)
					}
					//服务端请求失败
					if(result.data.code!==0){
						if (options.toast !== false) {//控制显示服务器失败是否显示
							uni.showToast({
								title: result.data.msg || '服务端失败',
								icon: 'error'
							});
						}
						return rej(result.data)
					}
					//成功
					return res(result.data.data)
				},
				//请求失败(这里的请求失败是移动端请求失败)
				fail: (error) => {
					uni.showToast({
						title: '请求失败'||error.errMsg,
						icon:"none"
					});
					return rej(error)
				},
			});
		})
	},
	//get请求
	get(url,data={},options={}){
		options.url=url
		options.data=data
		options.method="GET"
		return this.request(options)
	},
	//post请求
	post(url,data={},options={}){
		options.url=url
		options.data=data
		options.method="POST"
		return this.request(options)
	},
	//delet请求
	del(url,data={},options={}){
		options.url=url
		options.data=data
		options.method="DELETE"
		return this.request(options)
	}
}

全局挂载

main.js中写入

// 引入request库
import $H from "@/utils/request.js"
Vue.prototype.$H=$H

页面使用示例

this.$H.post('/register',{
							"username":this.username,
							"password":this.password
					}).then((res)=>{
						console.log("注册成功",res);
						uni.showToast({
							title: '注册成功，请登录',
							icon:"success"
						});
					}).catch((err)=>{
						console.log("注册失败",err);
					})
				})

说明：

三种请求分别为this.$H.get,this.$H.post,this.$H.del

请求携带三个参数，(url,data={},options={})，其中

• url为基础的request.js中的baseUrl拼接上请求的url，例如：baseUrl:"www.baidu,com",参数url:"/login“,则实际访问的接口为:www.baidu,com/login
• data为携带的数据
• options可以写native=“true”和toast="false",第一个native表示返回数据库返回的原始全部数据，第二个代表不用我封装好的提示，自己写特殊的失败提示。