详解微信小程序的 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 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
详解python算法之冒泡排序
2019/03/05 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python如何查看网页代码
2020/06/07 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
学生实习自我鉴定
2013/10/11 职场文书
建筑施工员岗位职责
2013/11/26 职场文书
请假条格式范文
2014/04/10 职场文书
《学棋》教后反思
2014/04/14 职场文书
企业安全标语
2014/06/07 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
护理实习生带教计划
2015/01/16 职场文书
电影雷锋观后感
2015/06/10 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python