【微信小程序学习】前后端交互

1、语法：wx.request()

onLoad: function (options) {
    wx.request({
      url: http://localhost:3000/banner,
      data:{type:2},
      success:(res)=>{
        console.log(请求成功:,res)
      },
      fail:(err)=>{
        console.log(请求失败:, err)
      }
    })
  },

2、注意点：

（1）协议必须是https协议

（2）一个接口最多配置20个域名

（3）并发限制上限时10个

（4）开发过程中设置不校验合法域名：开发工具--->右上角详情--->本地设置--->不校验

3、发送ajax请求

（1）封装功能函数

1. 功能点要明确
2. 函数内部应该保留固定代码（静态的）
3. 将动态的数据抽取成形参，由使用者根据自己的情况动态的传入实参
4. 一个良好的功能函数应该设置形参的默认值

（2）封装功能组件

1. 功能点要明确
2. 组件内部保留静态的页码
3. 将动态的数据抽取成props参数，由使用者根据自身的情况以标签属性的形式动态传入props数据
4. 一个良好的组件应该设置组件的必要性及数据类型

4、具体操作

新建文件夹utils

request.js

//发送ajax请求
import config from./config.js
export default (url,data={},method=GET)=>{
  return new Promise((resolve,reject)=>{
    wx.request({
      url:config.host + url,
      data,
      method,
      success: (res) => {
        console.log(请求成功:, res);
        resolve(res.data);
      },
      fail: (err) => {
        console.log(请求失败:, err);
        reject(err);
      }
    })
  })


}

config.js

export default {
  host:http://localhost:3000
}

index.js

onLoad: async function (options) {
    let bannerListData = await request(/banner,{type:2});
    this.setData({
      bannerList:bannerListData.banners
    })
    //获取推荐歌单数据
    let recommendListData = await request(/personalized,{limit:10}).then((res)=>{
      this.setData({
        recommendList: res.result
      })

    })
    //获取排行榜的数据
    // 需求分析：1、需要根据idx的值获取对应的数据2、idx的取值范围是0-20 我们需要0-4
    // 3、需要发送5次请求
    let index = 0;
    let resultArr=[];
    while(index<5){
      let topListData = await request(/top/list, { idx: index++ });
      let topListItem = {name: topListData.playlist.name, tracks:topListData.playlist.tracks.slice(0,3)};
      resultArr.push(topListItem);
      //不需要等待五次请求全部结束才更新，用户体验好
      this.setData({
         topList:resultArr
      })
    }
     //更新topList的状态值，此处更新会导致请求过程中页面长时间白屏，用户体验差
    //  this.setData({
    //     topList:resultArr
    //  })
  },

可以在AppData中获取到数据