微信小程序封装的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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
JS代码优化的8点建议
Feb 04 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
php递归创建目录的方法
2015/02/02 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
python如何输出反斜杠
2020/06/18 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
关于期中考试的反思
2014/02/02 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
汽车促销活动方案
2014/03/31 职场文书
简历自荐信范文
2015/03/09 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server