关于小程序,使用promise,模块化封装网络层

在小程序中请求,经常有重复的请求代码

如下图

 onLoad: function (options) {    
    // 进页面先请求数据
    wx.showLoading({
      title: '拼命加载中',
    })
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      // 注意success会改变this指向,这里我们要使用箭头函数
      success:(res)=>{
        console.log(res.data);
        this.setData({bannerData:res.data.message})
        wx.hideLoading({})
      }
    })
  },

这种请求的重复代码会太多,就算是普通封再调用也不会更简洁

封装第一步

封装第二部

创建一个常量baesUrl ,基准路径

const baesUrl='https://api-hmugo-web.ithame.net/api/public/v1'

创建一个请求的函数,这里我 new 了一个promise,并且return出了promise对象

const get =(url,data)=>{
  //new Promise对象里面放入异步函数,当成功的时候,我们把resolve(res)
  return new Promise((resolve,rejects)=>{
    wx.request({
      url: baesUrl + url,
      data,
      success:(res)=>{
        resolve(res)
      }
    })
  })
}

再封装一个post请求

const post =(url,data)=>{
  return new Promise((resolve,rejects)=>{
    wx.request({
      method:'post',
      url: baesUrl + url,
      data,
      success:(res)=>{
        resolve(res)
      }
    })
  })
}

最后我们需要暴露模块,在微信里面尝试 export default 但是并不能实现
参考文档 : 微信小程序模块化详细介绍
这个步骤十分重要

module.exports={
  get,post
}

调用封装模块

引用封装模块

//使用关键字 require 
const {get,post} = require('../../utils/http')

使用封装的get请求 ,函数使用async await 语法更加精简

 async getBannerData(){
    // 封装返回的是一个promise对象,我们可以使用async,await ex7的新语法
      const bannerPormise =get('/home/swiperdata')
      const res= await bannerPormise
      this.setData({bannerData:res.data.message})
      // 返回一个promise对象是因为下拉刷新我们需要 重新获取数据,监听数据回来,就需要promise.all()方法监听一个数组,数组里面的元素为promise对象,
      return bannerPormise
    },