详解微信小程序的 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中confirm,alert,prompt函数区别分析
Jan 17 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php数组去重的函数代码
2013/02/03 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP学习记录之数组函数
2018/06/01 PHP
基于jQuery的获取标签名的代码
2012/07/16 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python下载网络小说实例代码
2018/02/03 Python
Django对models里的objects的使用详解
2019/08/17 Python
Django获取应用下的所有models的例子
2019/08/30 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
结婚喜宴主持词
2014/03/14 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python