React ajax | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第8天

异步&回调函数

异步

在JavaScript的世界中，所有代码都是单线程执行的。 由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。

function a(){
    console.log('执行a');
    setTimeout(function(){
        console.log('a执行完毕')
    },1000)
};
​
function b(){
    console.log('执行b')
};
​
a();
b();

最终的运行结果为

执行a
执行b
a执行完毕

以上代码会先执行函数a,而且不会等到a中的延迟函数执行完才执行函数b, 在延迟函数被触发的过程中就执行了函数b,当js引擎的event 队列空闲时才会去执行队列里等待的setTimeout的回调函数，这就是一个异步的例子.即使时间设置为0，也是会照样先执行函数b

回调函数

在异步执行的模式下，每一个异步的任务都有其自己一个或着多个回调函数，这样当前在执行的异步任务执行完之后，不会马上执行事件队列中的下一项任务，而是执行它的回调函数，而下一项任务也不会等当前这个回调函数执行完，因为它也不能确定当前的回调合适执行完毕。例如：上述代码中的setTimeout就是一个回调函数。

在实际体验中，当我们访问购物网站时，浏览器请求加载图片资源是一个耗时操作，网络条件差时，会导致图片加载很慢。但是此时我们仍然可以点击购物按钮完成购物的操作。这是因为图片加载（Ajax）是一个异步请求。它并不会因为图片加载事件而阻塞其它JS事件

\1. React本身只关注于界面, 并不包含发送ajax请求的代码

\2. 前端应用需要通过ajax请求与后台进行交互(json数据)

\3. react应用中需要集成第三方ajax库(或自己封装)

常用的ajax请求库

\1. jQuery: 比较重, 如果需要另外引入不建议使用

\2. axios: 轻量级, 建议使用

1. 封装XmlHttpRequest对象的ajax

2. promise风格

3. 可以用在浏览器端和node服务器端

4. GET请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });
​
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
​