小程序封装网络请求以及动态设置title的 bug

封装网络请求方法

1. 根目录中新建utils文件夹
2. utils中新建request.js文件

// 封装网络请求的方法，结合promise
module.exports = (url,data)=>{
  return new Promise((resolve,reject)=>{
    wx.request({
      url: `https://locally.uieee.com/${url}`,
      success: resolve,
      fail: reject,
    })
  })
}

页面中调用请求方法

1、在js文件中全局（最外面）引入模块

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

2、在onLoad中调用方法

onLoad: function (options) {
    // 不封装原生的 请求数据的方法
    // 请求九宫格的数据
     wx.request({
         url: 'https://locally.uieee.com/categories',
         success: (res) => {
         console.log(res.data);
         // 注意：this的指向已经改变，所以采用箭头函数
         this.setData({
               grids: res.data
           })
       }
  })

  // 调用封装的方法
  // 1、引入组件   2、调用方法
    request('categories').then((res)=>{
      console.log(res.data);
      // 注意：this的指向已经改变，所以采用箭头函数
        this.setData({
          grids: res.data
        })
    })
  },

动态设置title

1、 页面一加载，请求数据

 onLoad(options){
        // 获取跳转过来传递的参数
        console.log(options)
        // 请求列表的数据
        request('categories/' + options.cat).then(res=>{
            console.log(res.data);
            // 动态设置title
            // bug:设置title应该在onready之后设置，但是请求是异步，then方法里的有可能在onready之后执行，但是若是异步请求太快，也有可能在页面onready之前就去设置title了，这时就会出错
            // 解决方法：① 在data中定义一个变量name存储res.data
            // ② 在onready里判断，假如data中变量name中有值，说明在onready之前就已经设置了标题，没设置上，所以这里再设置一次
            this.setData({
                name:res.data
            })
            wx.setNavigationBarTitle({
                title: res.data.name
            })
        })
    },
onReady(){
    // bug:设置title应该在onready之后设置，但是请求是异步，then方法里的有可能在onready之后执行，但是若是异步请求太快，也有可能在页面onready之前就去设置title了，这时就会出错
        // 解决方法：① 在data中定义一个变量name存储res.data
        // ② 在onready里判断，假如data中变量name中有值，说明在onready之前就已经设置了标题，没设置上，所以这里再设置一次
        if(this.data.name){
            wx.setNavigationBarTitle({
                title: res.data.name
            })
        }
},