微信小程序封装的HTTP请求示例【附升级版】


Posted in Javascript onMay 11, 2019

本文实例讲述了微信小程序封装的HTTP请求。分享给大家供大家参考,具体如下:

微信小程序里自己封装了请求的函数,但几乎每个页面都要用到,所以为什么更方便的调用,再一次进行封装。

在app.js里面定义个全局对象,这样想要用到该函数,只需要在该页面的js文件里面,请求一个app实例。

废话不多说,先上代码:

//全局对象httpClient
httpClient:{
  request:function(method,url,data){
    //返回一个promise实例
    return new Promise( (resolve,reject)=>{
       wx.request({
        url:url,
        data:data,
        mehtod:method,
        success:function(res){
          resolve(res)
        },
        fail:function(res){
          reject(res);
        },
        complete:function(){
          console.log('complete');
        }
      })
    })
  }
  //get方法:用来获取数据
  get:function( url ) {
    return this.request('GET',url);
  },
  //post方法:用来更新数据
  post:function( url,data) {
    resturn this.request('POST',url,data);
  },
  //put方法
  put:function(url,data){
    return this.request('PUT', url, data);
  },
  //delete方法
  delete:function(url,data){
    return this.request('DELETE', url, data);
  }

在需要请求的页面调用:

例如:登录页面login.js

//获取app实例,从而调用全局对象的函数
var app=getApp();
login:function(){
  var url='http:xxxxx/login';
  var data={
    userName:'xxxxx',
    passwd:'xxxxxx'
  }
  app.httpClient.post( url,data )
    .then( res=>{console.log("请求成功时调用该函数")})
    .catch(res=>{console.log("请求失败时调用该函数")})
}
//为了更好的阅读,也可以将回调函数,定义在外面
//这样
loginSuccess:function(){
  console.log("请求成功时调用该函数")
},
loginFail:function(){
  console.log("请求失败时调用该函数")
},
login:function(){
  var self=this;
  var url='http:xxxxx/login';
  var data={
    userName:'xxxxx',
    passwd:'xxxxxx'
  }
  app.httpClient.post( url,data )
    .then( res=>self.loginSuccess())
    .catch(res=>self.loginFail())
}

是不是简洁多了。。。。

附:升级版

上代码

// 该函数怎么写,需要跟后端人员协商返回的格式
function getErrorMsgByErrorNo(error_no) {
 let error_msg;
 switch (error_no) {
  case 100: error_msg = '操作失败,请稍后再试!'; break;
  default: error_msg = '网络错误,请稍后再试!'; break;
 }
 return error_msg;
}
function handleData(res) {
 if (res.data.success) {
  if (typeof (res.data.body) === 'string') {
   return [];
  } else if (Array.isArray(res.data.body) === false) {
   const _arr = [];
   _arr.push(res.data.body);
   return _arr;
  } else {
   return res.data.body;
  }
 } else {
  if (res.data.error_no) {
   return {
    error_no: res.data.error_no,
    error_msg: getErrorMsgByErrorNo(res.data.error_no)
   };
  } else {
   return {
    error_no: 123456,
    error_msg: '服务器维护中,请稍后!'
   };
  }
 }
}
const httpClient = {
 request: function (method, url, data) {
  return new Promise((resolve, reject) => {
   wx.request({
    url: url,
    data: data,
    method: method,
    success: function (res) {
     resolve(handleData(res))
    },
    fail: function (err) {
     console.log('request fail ', err);
     resolve({
      error_no: 100,
      error_msg: getErrorMsgByErrorNo(100)
     })
    },
    complete: function (res) {
     console.log("request completed!");
    }
   })
  });
 },
 get: function (url) {
  return this.request('GET', url);
 },
 post: function (url, data) {
  return this.request('POST', url, data);
 },
 put: function (url, data) {
  return this.request('PUT', url, data);
 },
 delete: function (url, data) {
  return this.request('DELETE', url, data);
 },
};
module.exports = httpClient;

使用

function getMyselfData() {
 const _Url= urls.url;
 return httpClient.get(_Url);
}
 getData() {
  let resultsData = this.getMyselfData();
  resultsData.then((res) => {
   if (res.error_no) {
   // 只要有error_no就说明请求出现了错误
    this.toast.showToast({
     type: 'fail',
     title: res.error_msg,
    })
   } else {
    this.setData({
     journeyList: res.data
    })
   }
  });
 },

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
vue给对象动态添加属性和值的实例
Sep 09 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
vue实现下拉菜单树
Oct 22 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 #Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
JS实现获取当前所在周的周六、周日示例分析
May 11 #Javascript
js核心基础之构造函数constructor用法实例分析
May 11 #Javascript
js核心基础之闭包的应用实例分析
May 11 #Javascript
vue下载excel的实现代码后台用post方法
May 10 #Javascript
微信小程序如何再次获取用户授权的方法
May 10 #Javascript
You might like
php分页函数示例代码分享
2014/02/24 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
JavaScript 事件系统
2010/07/22 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
常用jQuery代码分享
2015/07/14 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Django实现的自定义访问日志模块示例
2017/06/23 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
军训自我鉴定
2013/12/14 职场文书
2014的自我评价
2014/01/13 职场文书
买房子个人收入证明
2014/01/16 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
毕业实习感受与体会
2015/05/26 职场文书
《叶问2》观后感
2015/06/15 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技