小程序如何发送网络请求?
发布于 4 年前 作者 jing68 2046 次浏览 来自 分享

一、视频教程地址

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
    })
回到顶部