微信小程序网络请求封装示例


Posted in Javascript onJuly 24, 2018

网络请求

网络请求小程序提供了wx.request, 仔细看一下 api,这不就是n年前的 $.ajax 吗,好古老啊。

// 官方例子
wx.request({
 url: 'test.php', //仅为示例,并非真实的接口地址
 data: {
   x: '' ,
   y: ''
 },
 header: {
   'content-type': 'application/json' // 默认值
 },
 success: function(res) {
  console.log(res.data)
 }
})

小程序支持ES6,那么就应该支持Promise 了,很开心~, 话不多说直接上代码吧

Promise封装

const baseUrl = 'https://api.it120.cc';

const http = ({ url = '', param = {}, ...other } = {}) => {
  wx.showLoading({
    title: '请求中,请耐心等待..'
  });
  let timeStart = Date.now();
  return new Promise((resolve, reject) => {
    wx.request({
      url: getUrl(url),
      data: param,
      header: {
        'content-type': 'application/json' // 默认值 ,另一种是 "content-type": "application/x-www-form-urlencoded"
      },
      ...other,
      complete: (res) => {
        wx.hideLoading();
        console.log(`耗时${Date.now() - timeStart}`);
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data)
        } else {
          reject(res)
        }
      }
    })
  })
}

const getUrl = (url) => {
  if (url.indexOf('://') == -1) {
    url = baseUrl + url;
  }
  return url
}

// get方法
const _get = (url, param = {}) => {
  return http({
    url,
    param
  })
}

const _post = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'post'
  })
}

const _put = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'put'
  })
}

const _delete = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'put'
  })
}
module.exports = {
  baseUrl,
  _get,
  _post,
  _put,
  _delete
}

使用

const api = require('../../utils/api.js')

// 单个请求
api.get('list').then(res => {
 console.log(res)
}).catch(e => {
 console.log(e)
})

// 一个页面多个请求
Promise.all([
 api.get('list'),
 api.get(`detail/${id}`)
]).then(result => {
 console.log(result)
}).catch(e => {
 console.log(e)
})

登陆问题

做一个应用,肯定避免不了登录操作。用户的个人信息啊,相关的收藏列表等功能都需要用户登录之后才能操作。一般我们使用token做标识。

小程序并没有登录界面,使用的是 wx.login wx.login 会获取到一个 code,拿着该 code 去请求我们的后台会最后返回一个token到小程序这边,保存这个值为 token 每次请求的时候带上这个值。
一般还需要把用户的信息带上比如用户微信昵称,微信头像等,这时候就需要使用 wx.getUserInfo ,这里涉及到一个用户授权的问题

带上用户信息就够了嘛? too young too simple!我们的项目不可能只有小程序,相应的微信公众平台可能还有相应的App,我们需要把账号系统打通,让用户在我们的项目中的账户是同一个。这就需要用到微信开放平台提供的 UnionID 。

登陆

//app.js
App({
 onLaunch: function () {
  console.log('App onLaunch');
  var that = this;
  // 获取商城名称
  wx.request({
   url: 'https://api.it120.cc/'+ that.globalData.subDomain +'/config/get-value',
   data: {
    key: 'mallName'
   },
   success: function(res) {
    wx.setStorageSync('mallName', res.data.data.value);
   }
  })
  this.login();
  this.getUserInfo();
 },
 login : function () {
  var that = this;
  var token = that.globalData.token;
  // 如果有token
  if (token) {
   // 检查token是否有效
   wx.request({
    url: 'https://api.it120.cc/' + that.globalData.subDomain + '/user/check-token',
    data: {
     token: token
    },
    success: function (res) {
     // 如果token失效了
     if (res.data.code != 0) {
      that.globalData.token = null;
      that.login(); // 重新登陆
     }
    }
   })
   return;
  }

  // 【1】调用微信自带登陆
  wx.login({
   success: function (res) {
    // 【2】 拿到code去访问我们的后台换取其他信息
    wx.request({
     url: 'https://api.it120.cc/'+ that.globalData.subDomain +'/user/wxapp/login',
     data: {
      code: res.code
     },
     success: function(res) {
      // 如果说这个code失效的
      if (res.data.code == 10000) {
       // 去注册
       that.registerUser();
       return;
      }
      // 如果返回失败了
      if (res.data.code != 0) {
       // 登录错误 
       wx.hideLoading();
       // 提示无法登陆
       wx.showModal({
        title: '提示',
        content: '无法登录,请重试',
        showCancel:false
       })
       return;
      }
      
      // 【3】 如果成功后设置token到本地
      that.globalData.token = res.data.data.token;
      // 保存用户信息
      wx.setStorage({
       key: 'token',
       data: res.data.data.token
      })
     }
    })
   }
  })
 },
 // 注册?? [这个看需求]
 registerUser: function () {
  var that = this;
  wx.login({
   success: function (res) {
    var code = res.code; // 微信登录接口返回的 code 参数,下面注册接口需要用到
    wx.getUserInfo({
     success: function (res) {
      var iv = res.iv;
      var encryptedData = res.encryptedData;
      // 下面开始调用注册接口
      wx.request({
       url: 'https://api.it120.cc/' + that.globalData.subDomain +'/user/wxapp/register/complex',
       data: {code:code,encryptedData:encryptedData,iv:iv}, // 设置请求的 参数
       success: (res) =>{
        wx.hideLoading();
        that.login();
       }
      })
     }
    })
   }
  })
 },
 // 获取用户信息
 getUserInfo:function() {
  wx.getUserInfo({
   success:(data) =>{
    this.globalData.userInfo = data.userInfo;
    wx.setStorage({
     key: 'userInfo',
     data: data.userInfo
    })
    return this.globalData.userInfo;
   }
  })
 },
 globalData:{
  userInfo:null,
  subDomain:"34vu54u7vuiuvc546d",
  token: null
 }
})

授权问题

微信小程序网络请求封装示例

getUserInfo: function () {
  // 先调用wx.getSetting 获取用户权限设置
  wx.getSetting({
   success(res) {
    console.log('1');
    if (!res.authSetting['scope.userInfo']) {
     wx.authorize({
      scope: 'scope.userInfo',
      success() {
       // 用户已经同意小程序使用录音功能,后续调用 wx.getUserInfo接口不会弹窗询问
       wx.getUserInfo({
        success: (data) => {
         this.globalData.userInfo = data.userInfo;
         wx.setStorage({
          key: 'userInfo',
          data: data.userInfo
         })
         return this.globalData.userInfo;
        }
       })
      }
     })
    } else {
     console.log(2);
    }
   }
  })

 },

小结

网络请求这块,算目前开发项目中必不可少的一块加油~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 #Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 #Javascript
微信小程序实现横向增长表格的方法
Jul 24 #Javascript
vue中使用sessionStorage记住密码功能
Jul 24 #Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 #Javascript
You might like
php 操作excel文件的方法小结
2009/12/31 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
php输出形式实例整理
2020/05/05 PHP
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
微信小程序开发探究
2016/12/27 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
深入理解Promise.all
2018/08/08 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
js实现弹窗效果
2020/08/09 Javascript
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
selenium+python实现自动登录脚本
2018/04/22 Python
python和c语言的主要区别总结
2019/07/07 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python中Django文件上传方法详解
2020/08/05 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
类的返射机制中的包及核心类
2016/09/12 面试题
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
文体活动总结范文
2014/05/05 职场文书
出差报告怎么写
2014/11/06 职场文书
志愿服务心得体会
2016/01/15 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang