[移动开发]微信小程序之uniapp关于接口的封装

微信小程序之uniapp关于接口的封装

第一步：使用promise封装一个get请求（post同理）

//GET
// 引入提示
let listing = function(urling){//这里动态传入url
	return new Promise((resolve,reject)=>{
		uni.request({
				url:urling,
				method:'GET',
			})
			.then((res)=>{
				resolve(res)
			})
			.catch((err)=>{
				let errs = '服务器错误，稍后再试'
				errdata.errlist(errs,"none")
				reject(err)
			})
		}
	)
}
export{listing}//导出

第二步：用js封装请求接口，当有大量接口时方便修改和管理

let url = 'https://meituan.thexxdd.cn/api/'
let getpreferurl = `${url}forshop/getprefer`

export{	getpreferurl}//导出

第三步：封装错误提示，可以在不同错误下引入同一弹窗，支持按需传入提示语和提示图标

const errdata = {
	errlist(err，errlogo){
		uni.showToast({
			title:err,//这里可以动态传入提示信息
			duration:3000,
			icon:errlogo//这里可以传一个动态的图标数值
		})
	}
}
export{	errdata}

第四步：引入和使用

//引入接口
import {listing} from '../../api/api.js'
//引入请求地址
import {getpreferurl} from '../../api/request.js'

//methods：{}里的方法
preference(){
	listing(getpreferurl)
	.then((res)=>{
		console.log(res)
		this.preferdata = res[1].data
	})
	.catch((err)=>{
		console.log(err)
	})
}