详解微信小程序的 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左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
npm qs模块使用详解
Feb 07 Javascript
vue实现员工信息录入功能
Jun 11 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
mysql 性能的检查和优化方法
2009/06/21 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
vue2.0 路由模式mode="history"的作用
2018/10/18 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
python编写猜数字小游戏
2019/10/06 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
用Python制作音乐海报
2021/01/26 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
教学实验楼管理制度
2014/02/01 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
《秋游》教学反思
2014/04/24 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
董事会决议范本
2015/07/01 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP