小程序如何发送网络请求?
一、视频教程地址
https://www.bilibili.com/video/BV1MA411b7SD?p=10
二、文档
1.不校验合法域名
2.抓包调试
3.发送网络请求
pages/list/list.js
Page({
data:{
list:[], //医院列表
},
//发送网络请求
myRequest(){
var url="https://route.showapi.com/87-60?ityName=郑州";
wx.request({
url: url,
method:"GET",
success:(res)=>{
var list =res.data.showapi_res_body.hospitalList;
this.setData({
list
})
}
})
}
})
pages/list/list.wxml
<button type="primary" bindtap="myRequest">请求</button>
<view class="main">
<view class="item" wx:for="{{list}}" wx:key="id">
<image src="{{item.img}}"></image>
<view>{{item.hosName}}</view>
</view>
</view>
4、异步转同步
思路
把异步接口,外层包一个Promise,返回Promise对象。
获取Promise对象中的数据,用await,外层函数需要有async
代码
utils/http.js
/*
发送网络请求
[@params](/user/params) url String类型 接口地址
cityName String类型 城市名称
[@return](/user/return) Promise对象
*/
function http(url, cityName) {
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: {
cityName: cityName
},
method: "GET",
success: res => {
resolve(res)
},
fail: err => {
reject(err)
}
})
})
}
export {http}
pages/list/list.js
var url="https://route.showapi.com/87-60?cityName=郑州";
var result = await http(url,"郑州").catch(err=>{
console.error(err);
})
// console.log(result)
var list =result.data.showapi_res_body.hospitalList;
this.setData({
list
})