小程序封装request请求

停工不停学,逆战中求生存,最近学习到小程序,避免不了要请求数据,这里稍微给封装一下request,这里以uniapp为例,其他小程序,稍加修改

1.新建一个utils目录,再创建一个index

const baseUrl = "http://www.XXX.com",//这里放置url域名

export function request(options){//封装的requset
	let { url,data,method } = options;
	data = data || {},
	
	uni.showToast({//请求数据时的loading
	    title: '加载中',
	    duration: 200,
		icon:"loading"
	});
	return new Promise((resolve,rejext)=>{
		uni.request({//这里是uniapp网络请求的api
		    url: baseUrl + url, //仅为示例,并非真实接口地址。
		    data,
			method:method||"GET",//默认请求方式是get
		    success: (res) => {
				resolve(res)
		    }
		});
	})
}

export function showToast(options){//封装Toast
	let { title,duration,icon } = options;
	uni.showToast({
	    title:title,
	    duration: 2000,
		icon:icon || "none"
	});
}

2.使用request
在需要使用request的地方,先引入request

import { request,showToast } from "../../utils/index.js"

使用request,以下为例

request({//request请求
	url:"/api/cart/add",
	data:{
		proid:this.proid,
		num:1,
		token:this.token,
		userid:this.userid
	},
	method:"POST"
	}).then(res=>{
	if( res.data.code === "10119"){
		uni.navigateTo({
		    url: '/pages/login/login'
		});
	}else{
		if(res.data.code === "10011"){
			showToast({title:res.data.message})//使用封装的toast
		}
	}
})
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐