第六篇：微信小程序的网络数据请求

前提：建议还没学HTML、CSS、JavaScript、JSON、vue、Ajax的兄弟姐妹们，先去把这些基础补好过一遍，不然不好理解微信小程序

一、小程序的网络请求的限制

未设置前这样的

1、设置request合法域名

去微信小程序官网——小程序，找到【开发】—>【开发管理】—>【服务器域名】，

点击【开始配置】，然后就可以在【request合法域名】输入想访问的接口的所在的服务器网址

这里我之前看黑马程序员老师刘龙彬有一个网站，但是他23年辞职了，很多API要花钱的所以他停掉了，可以自己试试，反正我试了每一个能用的，都是404 Not Found刘龙彬的博客https://www.escook.cn

这里给几个我自己测试的时候正常的：

1、黑马程序员为Ajax提供的免费测试API域名：https://hmajax.itheima.net，具体接口文档在这欢迎使用 - AJAX阶段

2、免费API网址：接口大全-免费API,收集所有免费的API，但是注意这个网址不是request合法域名，他只是一个收集各种API的网站，各个不同的API都是来自不同域名网址的，自己可以试试，注意如果是国外的那种域名网站可能不通过（域名网站基本就是他给出的api的url里，截止到.com、.cn、.net...这里之前的就是域名网址）

3、这个比较好用：公共api-免费API接口调用平台（csdn自动把网址变成这样了，自己点开网站复制网址），缺点是：(1)很少支持post请求的API，(2)部分API接口需要key，不过key也只需要注册了就会生成一个，然后需要key的API你只需要把它当成一个参数，放到data那里就行了

然后request可以有多个合法域名网址，你只需要在每个网址后面加一个英文的“ ; ”分号，就能在后面接上别的网址了

这里有个小bug，有时候即使你刷新了小程序编译器的【项目配置】，但是request看到了这几个网址更新了，但是一编译还是没有连接成功，直接关了小程序编译器，再打开就好了。

二、开始发起请求

要发起网络数据请求，就要调用微信的【wx.request( )】函数，这玩意跟Ajax里的axios库非常相似，有学过Ajax的可以巩固一下语法基础

Ajax的【axios】的写法：

//get请求
axios({
    url: "服务器地址",
    method: "get", //默认是get，get请求就不用写method
    params: {
        //get请求用params传递要查询的参数
    }
}).then(res => {
    //请求成功后要做什么事
}).catch(err => {
    //请求失败了要干什么
})

//post请求
axios({
    url: "服务器地址",
    method: "post", //post请求必须写method
    data: {
        //post用data传递要发送的参数
    }
}).then(res => {
    //请求成功后要做什么事
}).catch(err => {
    //请求失败了要干什么
})

现在再看一下【wx.request( )】函数的写法

wx.request({
    url: "服务器地址",
    method: "get",  //跟axios一样，默认是get，get请求其实就不用写method
    data: {
        //参数
    },
    //这里不理解()=>{}是什么的，去b站查一下JavaScript的箭头函数知识点
    success: (res) => {
        //请求成功要做的事（是回调函数）
    }
})

能看错来基本一样，区别就是：

【一样】：

1、wx.request() 和 axios，请求方式是get请求时都可以省略

2、都有【url】【method】这些，post请求都是用【data】传参数

【不同】：

1、wx.request()里不管get、post请求，传递参数都是靠data这个属性

2、wx.request()里请求完要做的事（回调函数）是直接写在函数里的对象体里，但是axios库是通过.then( )函数来执行回调函数

现在这里举个例子：

//WXML代码
<view>~~~~~~~~~~~~~~~~~~~~~~~~~~~</view>
<button bind:tap="getInfo">get请求</button>
<view>~~~~~~~~~~~~~~~~~~~~~~~~~~~</view>
<button bind:tap="postInfo">post请求</button>
<view>~~~~~~~~~~~~~~~~~~~~~~~~~~~</view>

//JS部分
Page({
  data: {
    //暂时没有需要与WXML绑定的数据，空着
  },
  //get请求
  getInfo(){
    //调用wx.request({...})函数
    wx.request({
      //一个讲笑话的接口（request域名是‘https://qqlykm.cn’）
      url: 'https://qqlykm.cn/api/joke/index',
      data: {
        //有的API接口需要key，自己去对应网站注册就会有
        key: "0usuKOMipmKqjBXis3l1hD6PZK"
      },
      success: (res) => {
        //成功时调用的回调函数
        console.log(res.data.data.joke)
      }
    })
  },
  //post请求
  postInfo(){
    //调用wx.request({...})函数
    wx.request({
      //黑马程序员的一个注册接口，(域名是‘https://hmajax.itheima.net’)
      url: 'https://hmajax.itheima.net/api/register',
      method: "post",//别忘了写请求方式，不然怎么搞都是‘404 Not Found’
      data: {
        "username": "黑马no1hello",
        "password": "123456"
      },
      success: res => {
        console.log(res)
      }
    })
  }
})

（注意这个post请求的注册接口案例，复制我代码的时候改一下账户参数，不然的话我已经注册过的账户你再注册不就错了嘛）

三、在页面加载的时候就请求数据

上一个案例讲的是要去点击某个按钮，或者触发某个事件才会发送请求，现在我们想当页面刚加载的时候就自动发送请求

那么做法很简单，js原本就给我们配了一个生命周期函数【onLoad(options)】，你想要让它自动干什么事，只需要把做的那些事写在其他函数里，然后把其他函数放进【onLoad(options)】“肚子里”用this.调用它们就行了

例子：

//JS部分
Page({
  /* 生命周期函数--监听页面加载 */
  //这里跟data一样，我们一点开.js文件，json就已经给我们配置好了，直接用
  onLoad(options) {
    //往这里直接调用想要加载的事件、请求，用this指代当前这个【页面对象】
    this.getInfo()
    this.postInfo()
  },

  //还是刚才那两个get、post请求，这次页面一加载就自动发送请求，不需要点击
  getInfo(){
    console.log('GET成功')

    wx.request({
      url: 'https://qqlykm.cn/api/joke/index',
      data: {
        key: "0usuKOMipmKqjBXis3l1hD6PZK"
      },
      success: (res) => {
        console.log(res.data.data.joke)
      }
    })
  },
  postInfo(){
    console.log('POST成功')

    wx.request({
      url: 'https://hmajax.itheima.net/api/register',
      method: "post",
      data: {
        "username": "黑马no3hello",
        "password": "123456"
      },
      success: res => {
        console.log(res)
      }
    })
  }
})

四、跳过request合法域名校验

懒得打字，看一下黑马程序员的视频截图吧hh

但是注意！！跳过request只能在开发、调试阶段这样，要开始正式部署、上线的时候就不可以这样了

五、最后提示

虽然我多次提到这一篇跟Ajax知识点很像，但是微信小程序的“网络数据”和Ajax请求是两码事，Ajax的核心是基于浏览器的XMLHttpRequest这个对象发送请求，而微信小程序是依赖于微信客户端，所以微信小程序不能说“发起Ajax请求”，只能说是“发起网络数据请求”

另外web开发时基于不同的浏览器的【宿主环境】，会存在【跨域】问题；而小程序只有【微信客户端】这个宿主环境，不存在【跨域】