详解微信小程序的 request 封装示例

 更新时间:2018年08月21日 08:28:43   作者:兰茗翔  
这篇文章主要介绍了详解微信小程序的 request 封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

背景

之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 request 的封装

httpUtils.js

const request = function (path, method, data, header) {
 let user_id = "";
 let token = "";
 try {
  user_id = wx.getStorageSync(USER_ID_KEY);
  token = wx.getStorageSync(TOKEN_KEY);
 } catch (e) {}
 header = header || {};
 let cookie = [];
 cookie.push("USERID=" + user_id);
 cookie.push("TOKEN=" + token);
 cookie.push("device=" + 1);
 cookie.push("app_name=" + 1);
 cookie.push("app_version=" + ENV_VERSION);
 cookie.push("channel=" + 1);
 header.cookie = cookie.join("; ");
 return new Promise((resolve, reject) => {
  wx.request({//后台请求
   url: API_BASE_URL + path,
   header: header,
   method: method,
   data: data,
   success: function (res) {
    if (res.code) {
     reject(res.data)
    } else {
     resolve(res.data)
    }
   },
   fail: function (res) {
    reject("not data");
   }
  });
 });
};

userLogin.js

const login = function () {
 try {
  wx.removeStorageSync(USER_ID_KEY);
  wx.removeStorageSync(TOKEN_KEY)
 } catch (e) {}
 return new Promise((resolve, reject) => {
  wx.login({
   success: res => {
    let code = res.code;
    // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
    wx.getUserInfo({
     withCredentials: true,
     success: res => {
      let userInfo = res.userInfo;
      let name = userInfo.nickName;
      let avatar = userInfo.avatarUrl;
      let sex = userInfo.gender;
      let data = {
       code: code,
       encryptedData: res.encryptedData,
       iv: res.iv,
       name: name,
       avatar: avatar,
       sex: sex,
       from: FROM,
      };
      request("/api/user_login/byWeChatApplet", "POST", data).then( (res)=>{
       if (!res.code) {
        try {
         wx.setStorageSync(USER_ID_KEY, res.user_id);
         wx.setStorageSync(TOKEN_KEY, res.token)
        } catch (e) {
         reject(JSON.stringify(e));
        }
       }
       resolve(res)
      }).catch( (errMsg)=>{
       reject(errMsg)
      });
     },
     fail: function (res) {
      if (res.errMsg && res.errMsg.startsWith("getUserInfo:fail") && res.errMsg.search("unauthorized") !== -1) {
       reject("getUserInfo:fail");
       return;
      }
      wx.getSetting({
       success: (res) => {
        if (!res.authSetting["scope.userInfo"]) {//没授权
         showModal('提示', '需要获取用户的权限,点击确定前往设置,打开用户信息', true, function (res) {
          wx.openSetting({
           success: (res) => {
            // 用户返回 不管是否开启 接着去重新登录
            login().then( (res)=>{
             if (res.code) {
              reject(res.message);
              return
             }
             try {
              wx.setStorageSync(USER_ID_KEY, res.user_id);
              wx.setStorageSync(TOKEN_KEY, res.token)
             } catch (e) {
              reject(JSON.stringify(e));
             }
             resolve(res)
            }).catch( (errMsg)=>{
             reject(errMsg)
            });
           }
          })
         }, function () {})
        }
       }
      });
     }
    })
   }
  })
 });
};

项目地址:https://github.com/lmxdawn/wxa-demo

一个 vue + thinkphp5.1 搭建的后台管理:https://github.com/lmxdawn/vue-admin-html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 仿猪八戒网左下角的文字滚动效果

    仿猪八戒网左下角的文字滚动效果

    觉得猪八戒网左下角的文字滚动,效果不错!自己摸索了一下,以自己的方法实现了!没有运用jQuery,不过用了自己的编写的Js库!
    2011-10-10
  • js 输出内容到新窗口具体实现代码

    js 输出内容到新窗口具体实现代码

    js 输出内容一般都是在本窗口,如果要实现在新窗口的话该如何实现呢?下面与大家分享具体的代码
    2013-05-05
  • JavaScript展开运算符用法及实际应用详解

    JavaScript展开运算符用法及实际应用详解

    展开运算符是JavaScript中的语法糖,用三个点(...)表示,广泛应用于数组和对象的操作,本文介绍了其基本用法,如在数组和对象中的应用,合并数组或对象,更新对象属性等,还探讨了展开运算符的高级应用,需要的朋友可以参考下
    2024-09-09
  • js实现登录弹框

    js实现登录弹框

    这篇文章主要为大家详细介绍了js实现登录弹框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JavaScript canvas实现雨滴特效

    JavaScript canvas实现雨滴特效

    这篇文章主要为大家详细介绍了JavaScript canvas实现雨滴特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 浅析JS中NEW的实现原理及重写

    浅析JS中NEW的实现原理及重写

    本文通过实例代码给大家介绍了JS中NEW的实现原理及重写,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-02-02
  • js无后端实现点击加载查看更多(提示SEO友好度)

    js无后端实现点击加载查看更多(提示SEO友好度)

    为了提示SEO友好度,并且避免调用后端接口给服务器造成负担,可以使用js无后端实现点击加载查看更多,比如HTML中源码存在60条记录,预先显示20条记录,点击“查看更多”一次追加10条,最后一次后按钮文本改为“已查看全部”,在JavaScript中,你可以使用以下步骤来实现
    2024-10-10
  • 微信小程序实现选项卡功能

    微信小程序实现选项卡功能

    这篇文章主要为大家详细介绍了微信小程序实现选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JS实现网站换肤

    JS实现网站换肤

    这篇文章主要为大家详细介绍了JS实现网站换肤,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript禁止页面回退的方法步骤

    JavaScript禁止页面回退的方法步骤

    这篇文章主要为大家介绍了JavaScript禁止页面回退的方法步骤,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论