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


Posted in Javascript onAugust 21, 2018

背景

之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 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

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

Javascript 相关文章推荐
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 #Javascript
vue监听对象及对象属性问题
Aug 20 #Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 #Javascript
Vue插件打包与发布的方法示例
Aug 20 #Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 #Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 #Javascript
You might like
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
jquery 笔记 事件
2011/11/02 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
python+opencv实现车道线检测
2021/02/19 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
致共产党员倡议书
2014/04/16 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
名人传读书笔记
2015/06/26 职场文书
2019广播稿怎么写
2019/04/17 职场文书
导游词之张家口
2019/12/13 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python