详解微信小程序的 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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
vue中多个倒计时实现代码实例
Mar 27 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 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
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
openPNE常用方法分享
2011/11/29 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
Node.js模块封装及使用方法
2016/03/06 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python魔法方法详解
2019/02/13 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
浅析Python中字符串的intern机制
2020/10/03 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
关于有小孩的离婚协议书
2014/10/26 职场文书
护士医德考评自我评价
2015/03/03 职场文书
决心书格式及范文
2019/06/24 职场文书
导游词之山东八大关
2019/12/18 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang