微信小程序封装请求

封装请求 解决的问题 很多页面中请求的url前半部分都是一样的，重复书写导致页面代码冗余复杂同时逻辑容易不清晰，所以采用单独将请求封装成一个文件（模块）使得这些问题得到解决。 前期基础知识 uni.request（wx.request）Promise 具体步骤 创建文件夹及文件 在根目录下创建一个文件夹，名为utils（可自行修改），在此文件夹下新建一个名为request.js（可自行修改）的文件。 分析request请求基本参数 url：请求地址 一般url都是有一个固定前缀(域名)，只是后面不同。

 https://xfxuezhang.cn:8080/village/v1/media/activity/newest
 https://xfxuezhang.cn:8080/village/v1/media/activity/detail
 https://xfxuezhang.cn:8080/village/v1/user/login
 ......

设置一个全局常量baseUrl用来存储前缀。

const baseUrl = "https://xfxuezhang.cn:8080/village/v1/";

method：请求方法

const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';

header：请求头部 header的话根据method设置就行，默认如下。

let header = {
	'content-type': 'application/json' 
};

data：请求携带参数 GET请求直接传就可以。POST请求需要JSON.stringify(data)处理一下。 开始编写封装代码 编写请求的基本参数

const GET = 'GET';
const POST = 'POST';
const baseUrl = 'https://xfxuezhang.cn:8080/village/v1/';

编写request函数封装请求

function request(method, url, data) {
	return new Promise((resolve, reject) => {
		let header = {
		    'content-type': 'application/json' 
		};
		uni.request({
			url: baseUrl + url,
			method: method,
			header: header,
			data: method === POST ? JSON.stringify(data) : data,
			success: (res) => {
				if(res.data.code === 0){
					resolve(res);
				} else {
					reject('运行时错误,请稍后再试');
				}
			},
			fail: (err) => {
				reject(err);
			}
		})
	})
}

创建多个请求

const Api = {
	getActivity: (data) => request(GET, 'media/activity/detail', data),
	getsiwper: () => request(GET, 'media/activity/newest'),
	login: (data) => request(POST, 'user/login', data),
	......
};

导出Api

module.exports = {
	Api
}
// 或者
module.exports = {
	Api:Api
}

完整版代码

const GET = 'GET';
const POST = 'POST';
const baseUrl = 'https://xfxuezhang.cn:8080/village/v1/';

function request(method, url, data) {
	return new Promise((resolve, reject) => {
		let header = {
		    'content-type': 'application/json' 
		};
		uni.request({
			url: baseUrl + url,
			method: method,
			header: header,
			data: method === POST ? JSON.stringify(data) : data,
			success: (res) => {
				if(res.data.code === 0){
					resolve(res);
				} else {
					reject('运行时错误,请稍后再试');
				}
			},
			fail: (err) => {
				reject(err);
			}
		})
	})
}
const Api = {
	getActivity: (data) => request(GET, 'media/activity/detail', data),
	getsiwper: () => request(GET, 'media/activity/newest'),
	login: (data) => request(POST, 'user/login', data),
	
};
module.exports = {
	Api
}

编写使用（引用）代码 以获取轮播图接口为例，在其他.js文件里引入request.js下的Api。

const $api = require('../../utils/request.js').Api;
Page({
    data: {},
    onLoad() {
		this.loadData();
		$api.getsiwper().then((res) => {
			console.log(res.data);
			this.swiperList = res.data.data;
		})
		.catch((error) => {
			console.log(error);
		}
	}
})

其他平台的请求封装类似，可以采用相同的步骤进行。

参考链接