微信小程序封装的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.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
js微信分享实现代码
Oct 11 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
python 排列组合之itertools
2013/03/20 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python三引号输出方法
2019/02/27 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python多线程同步之文件读写控制
2021/02/25 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
2014教师研修学习体会
2014/07/08 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python