react学习笔记——react Ajax

React ajax

一、前置说明

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

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

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

常用的ajax请求库

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

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

   1. 封装XmlHttpRequest对象的ajax
   2. promise风格
   3. 可以用在浏览器端和node服务器端

二、axios

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