致力于响应式网站建设的一站式解决方案! 客服QQ:18150889 / 283052082

小程序封装ajax等工具函数

2018-03-29

重复性代码

我们知道使用小程序自带的wx.request API可以发起网络请求,写法如下

 

  1. wx.request({
  2. url: 'test.php', //仅为示例,并非真实的接口地址
  3. data: {
  4. x: '' ,
  5. y: ''
  6. },
  7. header: {
  8. 'content-type': 'application/json' // 默认值
  9. },
  10. success: function(res) {
  11. console.log(res.data)
  12. }
  13. })

但是做项目的时候碰到多个请求的时候,每次请求就需要写一遍,会存在很多重复代码,好在小程序项目目录里面有个util目录,里面也给我们写了个示例的formatTime工具函数,并将它exports出来了

 

  1. // util.js
  2. const formatTime = date => {
  3. const year = date.getFullYear()
  4. const month = date.getMonth() + 1
  5. const day = date.getDate()
  6. const hour = date.getHours()
  7. const minute = date.getMinutes()
  8. const second = date.getSeconds()
  9.  
  10. return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
  11. }
  12.  
  13. const formatNumber = n => {
  14. = n.toString()
  15. return n[1] ? n : '0' + n
  16. }
  17.  
  18. module.exports = {
  19. formatTime: formatTime
  20. }
 

书写我们自己的工具函数

首先,我们将ajax函数封装下,返回一个promise, 将下面代码添加到 util目录下的util.js中

 

  1. const ajax = (url, data, method, config = {}) => {
  2. let headerConfig = { // 默认header ticket、token、params参数是每次请求需要携带的认证信息
  3. ticket: '...',
  4. token: '...',
  5. params: '...'
  6. }
  7. return new Promise((resolve, reject) => { // 返回一个promise
  8. wx.request({
  9. url: host + url, // 拼接url
  10. data,
  11. header: Object.assign({}, headerConfig, config), // 合并传递进来的配置
  12. method: method,
  13. success(data){
  14. resolve(data)
  15. }
  16. })
  17. })
  18. }

我们再添加一个深拷贝的函数

 

  1. function deepCopy(o, c) {
  2. var c = c || {}
  3. for (var i in o) {
  4. if (typeof o[i] === 'object') {
  5. //要考虑深复制问题了
  6. if (o[i].constructor === Array) {
  7. //这是数组
  8. c[i] = []
  9. } else {
  10. //这是对象
  11. c[i] = {}
  12. }
  13. deepCopy(o[i], c[i])
  14. } else {
  15. c[i] = o[i]
  16. }
  17. }
  18. return c
  19. }

添加好后,再将函数exports出去 如下

 

  1. module.exports = {
  2. formatTime: formatTime,
  3. ajax: ajax,
  4. deepCopy: deepCopy
  5. }

使用工具函数Uti

首先我们在app.js顶部添加

 

  1. const util = require('./utils/util.js') // 将工具函数导入进来
  2. 然后在App函数中添加Util字段
  3.  
  4. Util:{
  5. ajax: util.ajax,
  6. deepCopy: util.deepCopy
  7. }

页面中实例化getApp()函数后,我们就可以使用工具函数了

 

  1. let app = getApp()
  2.  
  3. app.Util.ajax(....).then((data) => { // 使用ajax函数
  4. // 请求相应后的操作
  5. })
 

tip

通过封装了工具类的代码提取出来封装成函数,我们就可以少写一些重复性的代码,并培养我们消除重复代码的习惯。