超好用超短的小程序请求封装

超好用超短的小程序请求封装,也不算特别特别短吧哈哈哈。但真的很好用的一个小程序请求封装,在请求的时候简短提高效率不需要将一样的东西重复写。下面就让大家看看这个封装是有多短,不够短的话也请别打我

网上多数使用的小程序封装是在单独的一个js文件,再使用module.exports进行输出方法。我所介绍的封装方法有异曲同工之妙,只不过是写在app.js里边,省去了使用时必须引用文件的麻烦。

app.js

xcxPost(options = {}) {
    wx.showLoading({ mask: true, title: ‘‘, })
    wx.request({
      url: this.globalData.postUrl + options._url,
      data: options._data || {},
      method: "POST",
      dataType: "json",
      header: this.globalData.header,
      success: (res) => {
        if (res.data.errcode > 0) {
          if (typeof options._success == "function") {
            options._success(res.data);
          }
        } else {
          this.xcxErrorToast({ title: res.data.errmsg || ‘服务器返回错误!‘ });
          return;
        }
      },
      fail: (res) => {
        if (typeof options._fail == "function") {
          options._fail(res);
        }
        if (typeof options._fail == "string") { //请求失败的弹框提示
          wx.showToast({ title: options._fail, icon: ‘loading‘, duration: 2000 });
        }
      },
      complete: (res) => {
        if (typeof options._complete == "function") {
          options._complete(res);
        }
        wx.hideLoading()
      }
    });
  },

此处的this.globalData,是在app.js设置的,也就是小程序的全局属性,不了解的朋友请查阅小程序官方文档

而以上封装具体的返回参数说明,请移步官方文档   https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html#wxrequestobject

App({
  globalData:{
    userInfo:{},
    postUrl: (wx.getExtConfigSync().request_url || ‘(后台接口地址)‘),
    header: {
      ‘content-type‘: ‘application/x-www-form-urlencoded‘,
      ‘Cookie‘: ‘‘
    },
  }, 

其他页面引用封装请求,比如 index.js

/**
   * http请求
   * 获得banner图
   */
  getShopId(callBack) {
    app.xcxPost({
      _url:‘pc_home_page/banner‘,// 你需要发起的请求;
      _data: { type: ‘1‘ },// 你需要传的请求参数;
      _success: (resp) => {//请求成功后的操作;if (resp.errcode > -1) {
          // this.globalData.shopId = resp.list.shopId;
          // this.globalData.domainUrl = resp.list.domain;
          if (callBack) {
            callBack()
          }
        }
      }   
    })
  },

原文出处:https://www.cnblogs.com/web1/archive/2018/07/23/9353410.html

原文地址:https://www.cnblogs.com/skzxcwebblogs/p/9356158.html

时间: 2024-11-07 21:06:14

超好用超短的小程序请求封装的相关文章

微信小程序开发《三》:微信小程序请求不能使用session的原因及解决办法

本人在前面的微信小程序开发<二>中提到要想在服务端保持状态需要在客户端第一次请求服务器的时候给客户端返回一个sessionid,由客户端在本地保存,下次请求的时候在header里面带上这个sessionid,写到cookie字段里.但是最近发现请求时哪怕每次在header里带上sessionid还是不能拿到同一个session,百度后终于发现坑了(也不知道微信为啥要这么做),原来微信对wx.request这个API做了修改,小程序发起的请求并不是直接请求我们的后台服务器,而是先通过微信的服务器

微信小程序请求API接口PHPSESSID变化的解决方式

微信小程序开发,请求服务器API的方法使用的是微信官方提供的wx.request()方法.在开发中发现,每一个请求都会生成一个独立的PHPSESSID,如下图示: 搜索后得知,这是由于wx.request()造成的.如果直接使用浏览器请求并不会出现这种情况. 解决方式如下: 通过登录接口获取到用户的session_key 和 open_id,设置session信息如下: $3rd_session = md5(session_key . $open_id) $_SESSION[$3rd_sessi

微信小程序之封装http请求

下面将封装http请求服务部分的服务以及引用部分 // 本服务用于封装请求 // 返回的是一个promisepromise var sendRrquest = function (url, method, data, header) { var promise = new Promise(function (resolve, reject) { wx.request({ url: url, data: data, method: method, header: header, success:

微信小程序,封装同步请求

封装统一请求的目的:在请求时有时会返回不同的返回码进行不同的数据处理,比如:返回正常时,进行正常操作,如果返回了异常,那么就需要进行不同的处理了,由于每次请求都可能出现各种返回码,所以进行请求封装,进行统一异常处理. 在小程序中提供的请求: wx.request({ url: url, data: params, method: 'POST', header: {                'content-type': 'application/x-www-form-urlencoded'

小程序请求豆瓣API报403解决方法

微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种方法解决此问题(设置代理): 1.使用 https://douban.uieee.com 2.使用 https://www.zhihu.com/question/265806694/answer/302894881 以上两种方法均是设置代理请求豆瓣API数据. 使用方法:把 https://www.

restclient,微信小程序请求sessionID不一样导致取不到指定session的解决办法

restclient: header加上:"Cookie", "JSESSIONID=C1A34A2EC4C9423BB460E6F7005CA81E" 微信小程序: header加上:'Cookie':'session_id'   //本地存储的值(因为微信小程序不支持cookies 所以将session_id存入storage) 原文地址:https://www.cnblogs.com/handsomejunhong/p/8799041.html

微信小程序网络封装-简单高效

废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动端程序猿感觉甚是友好,加上有点前端基础就更是觉得入手很easy啦. 微信小程序的网络请求很便捷,直接调用就可以了.但最好还是根据需求,处理一些参数回调信息,进行二次封装,为整个小程序应用直接提供调方法接口岂不是更好? 利用网络请求的一贯思维,分三个回调:onStart:开始请求, onSuccess

小程序如何封装自定义组件(Toast)

1.创建和pages 同级的component目录新建一个myToast目录 例如: 2.myToast.wxml文件内容: <!-- 自定义toast组件 --> <!-- name 模块名称 --> <template name="toast" > <!-- catchtouchmove='xxx' 遮罩层的滚动穿透 --> <!-- isHide 显示消失 --> <view class="toast_c

小程序请求接口封装函数

function RequestUrl(url, data, method, success, fail, complete) { wx.request({ url: url, data: data ? data : {}, header: { 'content-type': 'application/json', 'Accept': 'application/json' }, method: method ? method : 'GET', success: success ? success