wx.request请求封装（微信小程序/uni-app）

距离做完项目很久了，腾出点时间，记录下。为了提高效率与可维护性，对其进行了一个简单的封装~

一、目录结构

二、三步骤

1、第一层封装（config.js）

分别针对get与post进行一个公共wx.request请求的封装；每个方法传了2个参数,url与data;

url:接口地址,
data:请求的参数,

const commonUrl ="https://ceshi.com/up/"  //公共路径

// post请求封装
function postRequest(url, data) {
	var promise = new Promise((resolve, reject) => {
		var that = this;
		var postData = data;
		uni.request({
			url: commonUrl + url,
			data: postData,
			method: 'POST',
			header: {
				'content-type': 'application/x-www-form-urlencoded',
				'token': uni.getStorageSync("token")
			},
			success: function(res) {
				// 此处的code=0，只是个举例，有的可能是1等其他的，具体的看后台决定；
                //res.data.data也根据自己的后台返回层级决定，
                //有的可能是res.data.data.data等其他形式。
                //返回什么就相应的做调整
				if (res.statusCode == 200 && res.data.code == 0) {
					resolve(res.data.data);
				} else {
					// 请求服务器成功，但是由于服务器没有数据返回，
                     //此时无code。会导致这个空数据 
                    
					// 不下去，导致报错，所以还是要resolve下，这样起码有个返回值，
                    //不会被阻断在那里执行不下去！
					resolve(res.data.data);
				}
			},
			error: function(e) {
				reject('网络出错');
			}
		})
	});
	return promise;
}

// get请求封装
function getRequest(url, data) {
	var promise = new Promise((resolve, reject) => {
		var that = this;
		var postData = data;
		uni.request({
			url: commonUrl + url,
			data: postData,
			method: 'GET',
			header: {
				'content-type': 'application/json'
			},
			success: function(res) {
				if (res.statusCode == 200 && res.data.code == 0) {
					resolve(res.data.data);
				} else {
						resolve(res.data.data);
				}
			},
			error: function(e) {
				reject('网络出错');
			}
		})
	});
	return promise;
}


module.exports = {
	postRequest,
	getRequest
}

2、第二层封装(http.js)

在http.js文件中进行第二层封装，即进行每个具体功能接口的请求封装；

这一层传请求的接口地址url

var config = require('./config.js')

// 文章请求列表
var getArticleList = function(e){
	return config.getRequest("article/list",e);
}


module.exports = {
    getArticleList
}

3、调用、传参（index.js）

在index.js中调用http.js中的接口;

这一层传请求的参数data

<template>
	<view>每日一读</view>
</template>

<script>
	import http from '../../utils/http.js';
	export default{
		onLoad() {
			http.getArticleList().then(list=>{
				console.log(list)
				// 此处的list就是config.js中，wx.request封装中resolve的值，
                //即list===res.data.data的值；
			})
			
			// 如果需要向服务器传值，可以这样写
			http.getArticleList({
				open:"value"
			}).then(list=>{
				console.log(list)
			})
			
		}
	}
</script>

封装形式多种多样，这里只是其中一种，比如有的封装了一层，调用的时候url与参数data一起传，但不建议这样，后续修改的话要去每个页面改。虽然地址不会经常改，但还是建议最好进行二层封装，把地址放在同一个文件好管理，仅供参考~

小程序与uni.app封装一样，一个wx.request，一个uni.request而已。