第4章：React ajax

4.1.1. 前置说明

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

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

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

4.1.2. 常用的****ajax****请求库

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

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

1. 封装XmlHttpRequest对象的ajax

2. promise风格

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

4.2. axios

4.2.1. 文档

<u>https://github.com/axios/axios</u>

4.2.2. 相关API

1)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);
  });

2)POST请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

4.4. 消息订阅-发布机制

1.工具库: PubSubJS
2.下载: npm install pubsub-js --save
3.使用:

1)import PubSub from 'pubsub-js' //引入
2)PubSub.subscribe('delete', function(data){ }); //订阅
3)PubSub.publish('delete', data) //发布消息