小程序的填坑小技巧之网络请求改造

北京阳光环球广告有限公司  http://www.sunad.net.cn  2018-05-08  浏览量：1000


Tags： 北京网站制作   网站SEO优化   SEO公司   SEO网站优化   SEO关键字优化   SEO网站关键字优化   百度SEO优化  

 
 
小程序在内测的时候就已经开始玩了，不过最开始的时候觉得，这sx东西东西怎么这么坑的样子，网络请求居然不是返回Promise而是用Callback的方式, 传值居然不能把值写在方法里只能用dataset,在这个全面组件化的大环境下居然不支持组件化...
 
其实最开始主要是书写时习惯的问题，秉承着我又不做小程序开发，就先忍着你的态度放任不管了。然而天有不测风云，最近因为业务的需求不得不做小程序相关的开发，我就倔脾气果断就不能忍了。果断的把不爽的地方改成能按我喜欢的方式来走，其中还遇到了一些其他的坑，一个个慢慢填，并把这些记录下来整理成了文章。
 
网络请求
 
网络请求小程序提供了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)
  }
})
现在还是只有一个请求就已经感觉写的很长了，如果一个页面需要多个请求呢，如果请求的顺序还有要求呢该怎么办，各种嵌套又臭又长，如果要求所以请求都完成之后再显示界面呢 瞬间懵逼。
 
这个时候我弱弱的看了一眼小程序的JS版本的支持，欧耶，比较良心的支持ES6。也就是说我们可以将其改成Promise是可能的。接下来看我如何改造。
 
/* utils/api.js  自定义网络请求 */
const baseURL = 'https://yourapi.com' // 自己后台API地址
const http = ({ url = '', params = {}, ...other} = {}) => {
  wx.showLoading({
    title: '加载中...'
  })
  let time = Date.now()
  console.log(`开始:${time}`)
  return new Promise((resolve, reject) => {
    wx.request({
      url: getUrl(url),
      data: params,
      header: getHeader(),
      ...other,
      complete: (res) => {
        wx.hideLoading()
        console.log(`耗时:${Date.now() - time}`)
        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
}
const getHeader = () => {
  try {
    var token = wx.getStorageSync('token')
    if (token) {
      return { 'token': token }
    }
    return {}
  } catch (e) {
    return {}
  }
}
module.exports = {
  baseURL,
  get (url, params = {}) {
    return http({
      url,
      params
    })
  },
  post(url, params = {}) {
    return http({
      url,
      params,
      method: 'post'
    })
  },
  put(url, params = {}) {
    return http({
      url,
      params,
      method: 'put'
    })
  },
  // 这里不能使用 delete, delete为关键字段
  myDelete(url, params = {}) {
    return http({
      url,
      params,
      method: '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)
})
如果习惯了 fetch 以及 axios 的朋友应该都会比较喜欢这种写法。 在做网络请求的时候还遇到一个问题，登录授权的问题。
 
登录问题
 
做一个应用，肯定避免不了登录操作。用户的个人信息啊，相关的收藏列表等功能都需要用户登录之后才能操作。一般我们使用token做标识。然后又会涉及到token不存在,用户第一次登录，token过期后，重新登录等问题。比较常规的操作是直接跳转到登录页面。
 
然后坑就出现了，小程序并没有登录界面，使用的是 wx.login 。 wx.login 会获取到一个 code，拿着该 code 去请求我们的后台会最后返回一个token到小程序这边，保存这个值为 token 每次请求的时候带上这个值。（详情可以查看小程序登录。）
 
然而仅仅这样就够了吗？ 很显然并不是。一般还需要把用户的信息带上比如用户微信昵称，微信头像等，这时候就需要使用 wx.getUserInfo ,这里涉及到一个用户授权的问题，留一个坑接下来再解决。带上用户信息就够了嘛？ too young too simple！我们的项目不可能只有小程序，相应的微信公众平台可能还有相应的App，我们需要把账号系统打通，让用户在我们的项目中的账户是同一个。这就需要用到微信开放平台提供的 UnionID 。
 
ps.基于小程序在微信中的易传播性, 为了鼓励用户去传播分享一般还会提供邀请奖励机制。但是微信这边又会对诱导分享进行和谐处理。视情况慎用。（本文会在例子上加上该功能）

本文地址：http://www.sunad.net.cn/content-104-791-1.html

上一篇：微信小程序“反编译”实战

下一篇：微信小程序复活了传统 PC 游戏

  • SEO知识
  • SEO热点问题
  • SEO工具
  • 建站知识
  • 网站设计
  • 网站开发
  • 行业资讯
  • 应用解决方案

网站分类

服务项目

关于我们

相关资讯

相关链接

北京阳光环球广告有限公司网络分公司 版权所有 违者必究 京ICP备13002036号-1

在线咨询
阳光环球在线咨询
热线电话
热线：010-83687575
扫一扫

扫一扫

全国免费服务热线
010-83687575

返回顶部