微信小程序封装的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下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
window.location.hash知识汇总
Nov 09 Javascript
简单实现js倒计时功能
Feb 13 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 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调用Linux命令权限不足问题解决方法
2015/02/07 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
python实现超市扫码仪计费
2018/05/30 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
爱护公共设施标语
2014/06/24 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
《猴王出世》教学反思
2016/02/23 职场文书