6-请求接口

一、请求接口

在 index.js 中:

data: {
    city:""  //定义变量存后台的数据
},
onLoad: function () {
let that = this;  //不能直接使用this,因为闭包了
  wx.request({
      url: 'https://ehcto.com/data.json',   //请求路径
      data:{
        key: "123",   //给后台传的值
        userName: "张三"
      },
      seccess(res) {
        console.log(res.data)   //后台返回的数据
        that.setData({
          city:res.data.city
        })
     }
  })
}

在 index.wxml 中:

{{city}}

⚠️微信小程序几乎所有的API接口都会有success, fail, complete三个回调函数来处理业务的后续逻辑,很多时候我们要获取当前页面对象来对视图进行渲染。当我们想要获取页面的初始数据 data时候,在回调函数里面就不能使用 this.data来获取,同样的就不能使用this.setData()函数来渲染视图。我们需要做的就是在把我们想要的this对象想复制到that。

二、封装URL

一般在请求的时候不直接写https://ehcto.com/data.json ,会把前半部分封装到工具类中,因为前半部分相同,封装起来以后用起来会方便很多。
util.js(或者在util文件夹下新建一个js文件)

let url = "https://echto.com/";
const getUrl = function(data){   //
  return url + data
}

module.exports = {  //抛出方法
  formatTime: formatTime,
  getUrl:getUrl
}

在需要使用请求的.js文件里:

const util = require("../../utils/util.js")   //引入函数
const requestUrl = util.getUrl("data.json");  //调用 
//https://ehcto.com/data.json

//在request 请求的时候路径可以直接写requestUrl变量名
let That = this;
wx.request({
  url:requestUrl,
  data:{
    key: "123",   //给后台传的值
    userName: "张三"
 },
seccess(res) {
    console.log(res.data)   //后台返回的数据
    That.setData({
       city:res.data.city   //赋值
   })
  }
})

️只能请求域名信息里边有的地址

你可能感兴趣的:(6-请求接口)