小程序中的数据请求

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出俩个限制：

• 只能请求 HTTPS 类型的接口

• 必须将接口的域名添加到信任列表中

  

---

配置 request 合法域名

• 配置步骤：
  1. 登录微信小程序管理后台
  2. 开发管理
  3. 开发设置
  4. 配置服务器信息
  5. 修改 request 合法域名
• 注意事项
  • 域名只支持 https 协议
  • 域名不能使用 IP 地址 或 localhost
  • 域名必须经过 ICP 备案
  • 服务器域名一个月内最多能修改5次

---

发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 Get 数据请求

getInfo(){
    wx.request({
        //请求的接口地址，必须基于 https 协议
        url: 'https://www.escook.cn/api/get',
        //请求方式
        method:"GET",
        //发送的数据
        data:{
            name:"xiaoming",
            age:10
        },
        //请求的回调
        success:(res)=>{
            console.log(res.data)
        }
    })
},

---

发起 POST 请求

调用微信小程序提供的 wx.request() 方法，可以发起 Post 数据请求

getInfo(){
    wx.request({
        //请求的接口地址，必须基于 https 协议
        url: 'https://www.escook.cn/api/post',
        //请求方式
        method:"POST",
        //发送的数据
        data:{
            name:"xiaoming",
            age:10
        },
        //请求的回调
        success:(res)=>{
            console.log(res.data)
        }
    })
},

---

在页面刚加载时请求数据

在实际开发中，我们需要在页面刚加载的时候，自动请求一些初始化的数据，此时需要在页面的 onLoad 事件中调用获取数据的函数

//生命周期函数--监听页面加载
onLoad: function (options) {

    this.getInfo();
    this.postInfo();
},

---

跳过 request 合法域名校验

如果后端仅仅提供了 http 协议的接口，暂时没有提供 https 协议的接口，为了不耽误开发进度，我们可以在微信开发者工具中，临时开启开发环境下不校验请求域名、TLS版本和HTTPS证书的选项，跳过 request 合法域名的校验

注： 跳过 request 合法域名校验的选项，仅限于开发和调试阶段使用

---

关于跨域和 Ajax 的说明

跨域问题只存在于浏览器的 Web 开发中，由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题

Ajax 技术的核心是依赖浏览器中 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做发起 Ajax 请求，而是叫发起网络数据请求