微信小程序封装的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 switch case 另类写法
Mar 14 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
如何对react hooks进行单元测试的方法
Aug 14 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数据库安装图文教程)
2010/04/28 PHP
php学习之 数组声明
2011/06/09 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
药学专业毕业生求职信
2013/10/20 职场文书
化学专业自荐信
2014/05/28 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
保研推荐信范文
2015/03/25 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
python基础之错误和异常处理
2021/10/24 Python