微信小程序request数据请求优化

458 阅读1分钟

首页我们封装一个请求js文件(话不多说,代码奉上)

通过es6语法的promise语法,进行优化(防止回调地狱的产生)

export const request=(params)=>{
  return new Promise((resolve,reject)=>{
    wx.request({
      ...params,
      success:(res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject(err)
      }
    })
  })
}

然后再数据请求的时候进行调用此函数

//不进行封装的话,我们会使用下面的这种形式
data: {
    swiperList:[]
  },
onLoad: function (options) {
     wx.request({
     //请求地址
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success: (res)=> {
        console.log(res.data.message)
        // let swiperList = res.data.message
        this.setData({
          swiperList:res.data.message
        })
     }
  })
  }
       

封装后,我们使用下面的这种形式


首先我们要先将封装的数据请求给引入进来
import { request } from "../../request/index.js"
data: {
    swiperList:[]
  },
  
 onLoad: function (options) {
  request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"}).then(res=>{
      this.setData({
        swiperList:res.data.message
      })
    })
 }