详解微信小程序的 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 分页全选或反选标识实现代码
Aug 09 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
javascript白色简洁计算器
May 04 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
js图片切换具体实现代码
Oct 13 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
JavaScript实现轮播图效果
Oct 30 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图像处理类代码分享
2012/01/19 PHP
php ci框架验证码实例分析
2013/06/26 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
php生成curl命令行的方法
2015/12/14 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
对python使用http、https代理的实例讲解
2018/05/07 Python
Python多继承原理与用法示例
2018/08/23 Python
Django 自定义分页器的实现代码
2019/11/24 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
养殖人员的创业计划书范文
2013/12/26 职场文书
房地产开发计划书
2014/01/10 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
模范家庭事迹材料
2014/02/10 职场文书
不错的求职信范文
2014/07/20 职场文书
中学生逃课检讨书
2015/02/17 职场文书