目錄

?首先： 封裝一個(gè)request請(qǐng)求的js文件，用的是Promise

然后： 請(qǐng)求編寫

原理：首先在頁(yè)面加載完成以后發(fā)送一次請(qǐng)求數(shù)據(jù)，由于請(qǐng)求的數(shù)據(jù)會(huì)反復(fù)使用，直接把他抽離到外面，以后直接調(diào)用。在使用async和await異步的方式接收請(qǐng)求的數(shù)據(jù)。最后在設(shè)置頁(yè)面的寬高，并設(shè)置觸底之后在發(fā)送一次請(qǐng)求即可。

組件代碼

request代碼

?

?首先： 封裝一個(gè)request請(qǐng)求的js文件，用的是Promise

然后： 請(qǐng)求編寫

原理：首先在頁(yè)面加載完成以后發(fā)送一次請(qǐng)求數(shù)據(jù)，由于請(qǐng)求的數(shù)據(jù)會(huì)反復(fù)使用，直接把他抽離到外面，以后直接調(diào)用。在使用async和await異步的方式接收請(qǐng)求的數(shù)據(jù)。最后在設(shè)置頁(yè)面的寬高，并設(shè)置觸底之后在發(fā)送一次請(qǐng)求即可。

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-797073.html

組件代碼

<!--pages/seven/seven.wxml-->
<navigation-bar title="旅途" back="{{false}}" color="black" background="#FFF"></navigation-bar>

<scroll-view scroll-y="{{true}}" style="width:100%;height:{{windowHeight}}px;" bindscrolltolower="onReachBottom">
<view>
  <view>
    <block wx:for="{{houselist}}" wx:key="item.data.houseId">
      <view>{{item.data.houseName}}</view>
      <image src="{{item.data.image.url}}"></image>
    </block>
  </view>
</view>
</scroll-view>

// pages/seven/seven.js
import { myRequest } from "../../services/request/index"
const systemInfo = wx.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;
Page({
  
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    windowHeight:windowHeight,
    houselist:[],
    allCities:{},
    currentPage:1
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad(options) {
    this.getCityData(),
    this.getHouselistData()

  },
  async getCityData(){
    const cityRes = await myRequest({
      url:"http://codercba.com:1888/api/city/all"
    })
    this.setData({allCities:cityRes})
  },
  async getHouselistData(){
    const houseRes = await myRequest({
      url:"http://codercba.com:1888/api/home/houselist",
      data:{
        page:this.data.currentPage
      }
    })
    console.log(this.data.houselist)
    console.log(houseRes.data)
    const finalHouseList = [...this.data.houselist,...houseRes.data]
    this.setData({houselist:finalHouseList})
    this.data.currentPage++
  },
  onReachBottom(){
    this.getHouselistData()
    console.log("觸底了")
  }
})

/* pages/seven/seven.wxss */

{
  "usingComponents": {    "navigation-bar": "/components/navigation-bar/navigation-bar"}
}

request代碼

export function myRequest(option){
  return new Promise((resolve,reject)=>{
    wx.request({
      ...option,
      success:(res)=>{
        resolve(res.data)
      },
      fail:reject
    })
  })
}

到了這里，關(guān)于小程序基礎(chǔ)學(xué)習(xí)（請(qǐng)求封裝）（重點(diǎn)，核心）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！