自学微信小程序从零到一:项目构建后http请求封装
程序员文章站
2022-03-11 19:07:34
...
一、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四种基础算法代码实例