微信小程序封装请求

封装请求

解决的问题

很多页面中请求的url前半部分都是一样的，重复书写导致页面代码冗余复杂同时逻辑容易不清晰，所以采用单独将请求封装成一个文件（模块）使得这些问题得到解决。

前期基础知识

具体步骤

创建文件夹及文件

在根目录下创建一个文件夹，名为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);
		});
	}
})

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