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

一、http模块分装

首先我们为什么要去分装微信的http模块呢，我们先看一下微信自带的http请求它的一个写法

wx.request({
 url: #39;test.php #39;, //仅为示例，并非真实的接口地址
 data: {
 x: #39; #39;,
 y: #39; #39;
 header: { #39;content-type #39;: #39;application/json #39; // 默认值
 success (res) {
 console.log(res.data)
})

这种请求方式呢类似我们古老的jquery方式的分装，我们需要在success的回调函数里面做一些业务操作，这种方式会形成我们的回调地狱问题，同时代码也不够直观，以及代码过于繁琐；

接下来我会通过promise的这种方式对于代码进行分装，将请求方式做一些简化

一、项目目录构建

在utils目录下边创建request.js文件，去做http请求封装，我们是通过promise这种方式进行封装，这样有利于我们对于错误的处理，也可以很直观的查看业务逻辑，封装示例代码如下：

/**
 * @param {String} url 
 * @param {Object} data 
 * @param {String} method 
 * @param {String} header 
function request(url, data={}, method= #39;GET #39;, header= Content-Type: application/json ,) {
 return new Promise(function (resolve, reject) {
 wx.request({
 url: url,
 data: data,
 header: header,
 method: method,
 dataType: #39;json #39;,
 responseType: #39;text #39;,
 success: (res)= {
 if(res.statusCode === 200) {
 if (res.data.code === 200) {
 resolve(res.data)
 } else {
 wx.showToast({
 title: res.data.msg,
 icon: #39;none #39;,
 image: #39; #39;,
 duration: 1500,
 mask: false,
 success: (result)= {
 resolve(res.data);
 } else {
 fail: (res)= {
 // 需要我们加上统一的错误处理代码
 reject(res)
 complete: ()= {}
// 封装方法
// 如果对于header有什么特殊的要求，可以在请求参数里面做一些添加，例如后续我们会在headder中加入我们的sessionkey这些内容
// header = {}里面添加header内容
// 这块是一个简版的说明
const header = {
 Content-Type : application/json ,
 // 这个token是微信登录以后，将token存入在缓存中
 token : ***************** 
const get = function(url, data, header) {
 return request(url, data, #39;GET #39;, header);
const post = function(url, data, header) {
 return request(url, data, #39;POST #39;, header);
const del = function(url, data, header) {
 return request(url, data, #39; #39;, header);
 del,
}

二、项目中请求的使用

首先我们在使用的位置引入我们封装好的http模块

import webHttp from #39;./utils/request #39;;

接下里我们可以使用我们封装好的webhttp工具，比之前直接用微信的request请求方式代码量降低，同时链式方式使得逻辑更加清晰

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

大概上是这样的一个过程，实际过程中可能根据后端restful api的方式需要对封装继续完善，同样是对于post请求的data参数也有不同的处理，这个需要按照实际情况做出相应的调整，如果本篇文章有帮助到你，欢迎收藏点赞，同样有什么地方有更好的方式欢迎交流，进步永不停息

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

以上就是自学微信小程序从零到一：项目构建后http请求封装的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！