自学微信小程序从零到一：搭建项目后封装http请求

1.拆解http模块

首先我们来看看为什么要拆解微信的http模块？ at 如何编写微信自己的http请求。

wx.request({ url: 'test.php', //这只是一个示例，并非实际的接口地址 data: { x: ' &# 39;, y: '' }, header : { ' content-type': 'application/json' // 默认值 }, success (res ) { console.log(res.data) }})

这种请求方法是对古老的 jquery 方法的扩展，类似。 。 我需要在我的成功回调函数中执行一些业务操作。 这种方法在回调地狱中形成了一个问题。 代码不直观，代码太混乱。

接下来，通过Promises封装你的代码，以简化请求方法。

1. 构建项目目录

在utils目录下创建request.js文件，用于封装http请求。 因为我们通过 Promises 来封装它，所以我们有错误处理的好处，而且它还允许我们以非常直观的方式显示业务逻辑。 封装后的示例代码如下：

/** * * @param {String} url * @param {Object} 数据 * @param {String} 方法 * @param {String} 标头 */function request(url , data = {}, method = ‘得到’他ader="Content-Type: application/json",) { return new Promise(function (resolve,reject) { wx.request({ url: url, data: data, header: header, method: method, dataType: 'json'，responseType：'text'，成功：(res)=>{ if(res.statusCode === 200) { if (res.data.code === 200) {solve(res.data) } else { wx.showToast({ 标题: res.data.msg, 图标: '无', 图像: '', 持续时间: 1500, 掩码: false,success: (result)=>{resolve(res.data) }, }); else { } }, failed: (res)=>{ // 拒绝需要添加集成错误处理代码 (res) } ,complete: ()=>{} }); }) }// 封装方法 // 如果对 headers 有特殊要求，可以对请求参数进行一些补充。 例如，稍后将其添加到标题中。 sessionkey content // 添加头部内容 header = {} // 这是简化版的解释 const header = { "Content-Type": "application/json", // 这个token 这是登录微信后的。 将令牌存储在缓存中 "token": "********************************"} const get = function( url, 数据, header) { return request(url, data, 'GET ', header);}const post = func化（url，数据，标头）{返回请求（url，数据，'POST'，标头）;}const del =函数（url，数据，标头）{返回请求（url，数据，＆＃39;'，标头) );}module.exports = { get, post, del, }

2. 在项目中使用请求

首先，使用 Deploy封装好的http模块就位。

import webHttp from './utils/request';

然后就可以使用封装的webhttp了。 该工具相比之前微信直接请求的请求方式减少了代码量，并且链式的方式让逻辑更加清晰。

webHttp.get(api.user.info, { // nick_name: ...self .globalData.userInfo }).then((res) => { console.log(res);})

流程大致是这样的。 在您的实际过程中，您可能需要根据您的后端RESTful API方法进一步完善封装。 这是同样的事情。 post请求中的数据参数也有各种处理。 这个要根据实际情况进行调整。 如果您觉得这篇文章有帮助，请收藏并喜欢它。 如果有更好的方法，欢迎大家交流，永远进步。 不间断

推荐教程：《微信小程序》

下载微信App

微信是一款支持通过手机网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：自学微信小程序从零到一：搭建项目后封装http请求 https://zhujicankao.com/123962.html