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)封装功能函数
- 功能点要明确
- 函数内部应该保留固定代码(静态的)
- 将动态的数据抽取成形参,由使用者根据自己的情况动态的传入实参
- 一个良好的功能函数应该设置形参的默认值
(2)封装功能组件
- 功能点要明确
- 组件内部保留静态的页码
- 将动态的数据抽取成props参数,由使用者根据自身的情况以标签属性的形式动态传入props数据
- 一个良好的组件应该设置组件的必要性及数据类型
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中获取到数据