微信小程序封装的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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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之sphinx
2013/05/15 PHP
php读取excel文件的简单实例
2013/08/26 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
关于php开启错误提示的总结
2019/09/24 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python 带时区的日期格式化操作
2020/10/23 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
写给保洁员表扬信
2014/01/08 职场文书
大学生个人事迹材料
2014/01/21 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
活动总结范文
2014/08/30 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
应收账款管理制度
2015/08/06 职场文书