微信小程序项目构建后http请求封装的示例分析
这篇文章将为大家详细讲解有关微信小程序项目构建后http请求封装的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
苍梧网站建设公司成都创新互联,苍梧网站设计制作，有大型网站制作公司丰富经验。已为苍梧上千多家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的苍梧做网站的公司定做！
一、http模块分装
首先我们为什么要去分装微信的http模块呢，我们先看一下微信自带的http请求它的一个写法
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: { 'content-type': 'application/json' // 默认值
},
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='GET', header="Content-Type: application/json",) {
return new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data,
header: header,
method: method,
dataType: 'json',
responseType: 'text',
success: (res)=>{
if(res.statusCode === 200) {
if (res.data.code === 200) {
resolve(res.data)
} else {
wx.showToast({
title: res.data.msg,
icon: 'none',
image: '',
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, 'GET', header);
}
const post = function(url, data, header) {
return request(url, data, 'POST', header);
}
const del = function(url, data, header) {
return request(url, data, '', header);
}
module.exports = {
get,
post,
del,
}二、项目中请求的使用
首先我们在使用的位置引入我们封装好的http模块
import webHttp from './utils/request';
接下里我们可以使用我们封装好的webhttp工具，比之前直接用微信的request请求方式代码量降低，同时链式方式使得逻辑更加清晰
webHttp.get(api.user.info, {
// nick_name:
...self.globalData.userInfo
}).then((res) => {
console.log(res);
})大概上是这样的一个过程，实际过程中可能根据后端restful api的方式需要对封装继续完善，同样是对于post请求的data参数也有不同的处理，这个需要按照实际情况做出相应的调整，如果本篇文章有帮助到你，欢迎收藏点赞，同样有什么地方有更好的方式欢迎交流，进步永不停息
关于“微信小程序项目构建后http请求封装的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
文章名称：微信小程序项目构建后http请求封装的示例分析
URL分享：http://6mz.cn/article/jpsdds.html