详解微信小程序的 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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
Mar 01 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 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 全角转半角实现代码
2010/05/16 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
应届生.NET方向面试题
2015/05/23 面试题
财务总监岗位职责
2014/03/07 职场文书
公司运动会策划方案
2014/05/25 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
MySQL 语句执行顺序举例解析
2022/06/05 MySQL