微信小程序封装请求并引用promise

最新推荐文章于 2020-07-28 19:07:55 发布

qq_44928869

最新推荐文章于 2020-07-28 19:07:55 发布

阅读量291

点赞数 4

本文链接：https://blog.csdn.net/qq_44928869/article/details/102737107

版权

先看下不封装的写法

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: '你好世界',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    list: [
      {id: 1, t: '从你的全世界路过'}, 
      {id: 2, t: '乖,摸摸头'}, 
      {id: 3, t: '三体'}
    ],
    count: 1
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
    this.loadData() // 加载数据
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  countPlus() {
    console.log(111)
    this.setData({
      count: this.data.count+1
    })
  },
  loadData() {
    wx.request({
   url: 'https://api-m.mtime.cn/Showtime/LocationMovies.api?locationId=290',
  success: (res) => {
    console.log(res)
   console.log(that)
   console.log(this)
    this.setData({
      list: res.data.ms
       })
    }
   })
  }
})

第一步：先在utils建一个网络封装请求

在这里插入图片描述

第二步：在request.js写get/post封装

function get(url, data) {
  return new Promise((reslove, reject) => {
    wx.request({
      method: 'GET',
      url,
      data,
      success: reslove,
      fail: reject
    })
  })
}
function post(url, data) {
  return new Promise((reslove, reject) => {
    wx.request({
      method: 'POST',
      url,
      data,
      success: reslove,
      fail: reject
    })
  })
}

module.exports = {
  get,
  post
}

第三步：调用接口

onst {get} =require("../utils/request.js")
function product() {
  return get('https://api-m.mtime.cn/Showtime/LocationMovies.api?locationId=290')
}
function  detailData(id){
  return get(`https://ticket-api-m.mtime.cn/movie/detail.api?locationId=290&movieId=${id}`)
}
module.exports={
  detailData, product 
}

第四步

/index.js
//获取应用实例
const app = getApp()
** const { product }=require("../../serves/detail.js")
Page({
 data: {
   motto: '你好世界',
   userInfo: {},
   hasUserInfo: false,
   count:1,
**    list: [{ id: 1, t: "从你的全世界路过" },{ id: 2, t: "罗小黑" }, { id: 3, t: "碧瑶" }],
   canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 //事件处理函数
 bindViewTap: function() {
   wx.navigateTo({
     url: '../logs/logs'
   })
 },
 /**
  * 生命周期函数--监听页面加载
  */
 *** onLoad:async  function () {
   const res = await product()
   this.setData({
     list: res.data.ms
   })
   
 }
 

})