平和乡自学微信小程序从零到一:项目构建后http请求封装
阅读 22390 · 发布日期 2020-08-24 17:26 · 温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】
一、http模块分装首先我们为什么要去分装微信的http模块呢,我们先看一下微信自带的http请求它的一个写法wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: { 'cont... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...
一、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请求封装的详细内容,更多请关注php中文网其它相关文章!
微信
分享相关标签:
微信小程序本文转载于:
掘金社区,如有侵犯,请联系a@php.cn删除
上一篇:
微信小程序图片无法显示怎么办?
下一篇:
微信小程序开发BUG经验的一些总结相关文章相关视频微信小程序中使用echarts微信小程序 绝对路径 require微信小程序中为什么不使用骨架屏,来提升用户体验?微信小程序图片无法显示怎么办?自学微信小程序从零到一:
项目构建后http请求封装初识微信小程序(1)深入了解微信小程序(一)深入了解微信小程序(三) [温州做小程序]