微信小程序封装的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 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 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
如何做到多笔资料的同步
2006/10/09 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python实现在目录中查找指定文件的方法
2014/11/11 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Python元组知识点总结
2019/02/18 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
如何清空python的变量
2020/07/05 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
linux系统都有哪些运行级别
2016/03/26 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
另类冲刺标语
2014/06/24 职场文书
中秋节寄语2015
2015/03/24 职场文书
留学推荐信怎么写
2015/03/26 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Django中celery的使用项目实例
2022/07/07 Python