微信小程序中如何使用后端接口请求数据

阳光穿透心脏的1/2处 2021-09-20 14:58 499阅读 0赞

**第一步：你需要有一个接口，后端人员给你写的接口，或者第三方平台导出的接口，例如**

> https://miniapp.sjw2l3.com/test

有时会报错，如下图，这时需要配置一下开发工具，将不校验合法域名勾上  
![在这里插入图片描述][20200906095214535.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyMjA5Mw_size_16_color_FFFFFF_t_70_pic_center]

**第二步：使用接口，代码如下,请求回来的数据在res中，可以在控制台进行打印查看**

wx.request({ 
      //仅为示例，并非真实的接口地址
      url: 'https://miniapp.sjw2l3.com/test', 
      data: { 
        x: '',
        y: ''
      },
      header: { 
        'content-type': 'application/json' // 默认值
      },
      success (res) {  //需要注意的是，这里也可以是箭头函数，也有必须使用箭头函数的情况
        console.log(res.data)
      }
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyMjA5Mw_size_16_color_FFFFFF_t_70_pic_center 1]  
**第三步：使用箭头函数形式展示回调数据**

success :(res)=> { 
            console.log(res.data)
          }

**第四步：现在已经拿到数据了，将数据给到data中，渲染页面即可**

Page({ 
      data: { 
        localdata:[]
      },
      onLoad: function () { 
        var that = this
        wx.request({ 
          url: 'https://miniapp.sjw2l3.com/text',
          method: 'GET',
          data: { 
          },
          success :(res)=> { 
            // console.log(res.data)
            //使用that给data里面的数组赋值
            that.setData({ 
              localdata:res.data//将数据给到data中
            })
            console.log(this.data.localdata)
          }
        })
      }
    })

[20200906095214535.png_pic_center]: /images/20210920/073ce06726834aaf995b8ad9774dea98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyMjA5Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210920/2e06d0831c6c45c1b6ab78f7a3ab0e53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyMjA5Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210920/768d16c988254d79b86fa712c3aa2775.png