React中使用ajax获取数据在移动浏览器中不显示问题

这个问题困扰了我半个月的时间，今天终于解决了。

在做的一个小项目，页面加载后使用ajax读取本地REST数据，保存在状态中，稍后在form的选择下拉框中显示，代码如下：

150     componentDidMount() {
151       var that = this;
152       const url = 'http://localhost/api/grads/';
153       $.ajax({
154         headers:{
155           'Content-Type':'application/json',
156         },
157         url: url,
158         type:"GET",
159         dataType:"json",
160         data:{},
161         success: function(result){
162           that.setState({grades:result,})
163         },
164         error: function(xhr, status,err){
165           console.log(err.Message);
166         },
167       })
168     }

奇怪的是，运行时在电脑端谷歌、火狐浏览器访问，数据都能加载，在手机端使用谷歌浏览器访问，选择下拉框始终为空，这说明手机端浏览器ajax获取数据时出了问题。
今天偶然在stackoverflow上这个帖子里终于找到了解决办法，修改后代码如下：

150     componentDidMount() {
151       var that = this;
152       const url = 'http://localhost/api/grads/';
153       $(function(){$.ajax({  // 此处添加$(function(){
154         headers:{
155           'Content-Type':'application/json',
156         },
157         url: url,
158         type:"GET",
159         dataType:"json",
160         data:{},
161         success: function(result){
162           that.setState({grades:result,})
163         },
164         error: function(xhr, status,err){
165           console.log(err.Message);
166         },
167       })}) // 此处添加})
168     }

修改后手机谷歌浏览器显示正常。这个$(function(){}的功能何在？

javascript中$(function() {....}) 是 jQuery 中的经典用法，等同于 $(document).ready(function() {....})，即在页面加载完成后才执行某个函数，如果函数中要操作 DOM，在页面加载完成后再执行会更安全，所以在使用 jQuery 时这样的写法很常见。

$(document).ready() 里的代码是在页面内容都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，当然如果你把script标签放到页面最后面那么就没问题了，此时和ready效果一样。

$(document).ready(function(){})可以简写成$(function(){});

可参考jquery此处的官方文档。

可能的原因是手机端刘览器与电脑端浏览器页面加载中处理脚本时间不同，前者是未等页面加载结束即执行jquery脚本，后者则相反，所以后者不需$(function(){}也可正常显示。