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


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 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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&amp;MYSQL服务器配置说明
2006/10/09 PHP
PHP执行速率优化技巧小结
2008/03/15 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php支付宝APP支付功能
2020/07/29 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
react build 后打包发布总结
2018/08/24 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python聊天室实例程序分享
2016/01/05 Python
Python 内置函数complex详解
2016/10/23 Python
python3中的md5加密实例
2018/05/29 Python
python里运用私有属性和方法总结
2019/07/08 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
监理资料员岗位职责
2014/01/03 职场文书
大学班长的职责
2014/01/27 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
浅谈MySQL之select优化方案
2021/08/07 MySQL
SQLServer之常用函数总结详解
2021/08/30 SQL Server