美文网首页
react 第四章—— ajax

react 第四章—— ajax

作者: 定格r | 来源:发表于2019-07-26 20:49 被阅读0次

1.理解:

  1. React本身只关注于界面, 并不包含发送ajax请求的代码
  2. 前端应用需要通过ajax请求与后台进行交互(json数据)
  3. react应用中需要集成第三方ajax库(或自己封装)

2.常用的ajax请求库

  1. jQuery: 比较重, 如果需要另外引入不建议使用
  2. axios: 轻量级, 建议使用
    a. 封装 ax
    b. promise风格
    c. 可以用在浏览器端和node服务器端
  3. fetch: 原生函数, 但老版本浏览器不支持
    a. 不再使用XmlHttpRequest对象提交ajax请求
    b. 为了兼容低版本的浏览器, 可以引入兼容库fetch.js

3.相关 API

- axios

1> GET 请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .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);
});

- Fetch

1> GET 请求

fetch(url).then(function(response) {
  return response.json()
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
});

2> POST请求

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
})

重点:
componentWillReceiveProps(nextProps): 监视接收到新的props, 发送ajax使用axios库发送ajax请求

相关文章

  • (四)React请求接口数据

    React请求接口数据 一、React ajax React本身只关注于界面, 并不包含发送ajax请求的代码,前...

  • react-rxjs-ajax

    react使用rxjs的ajax请求方式

  • react 第四章—— ajax

    1.理解: React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互...

  • React学习补充

    React 网络请求 方法一 原生请求,react自带的fetch请求方式: 方法二 ajax请求,react通过...

  • react最佳实践

    看到石墨的react文档。提到http://andrewhfarmer.com/react-ajax-best-p...

  • React中的“ajax”

    React没有ajax模块 集成其他的js库(如axios/fetch/jquery),发送ajax请求axios...

  • React ajax

    1. 用到两个工具, axios 和 lodash

  • react ajax

    简介 1,react 本身只关注界面,并不包含 ajax 请求的代码2,前端需要应用通过 ajax 请求与后台进行...

  • 如何在React中做Ajax 请求?

    如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式。实际上,就React而言,它甚...

  • React入门教程(9)Ajax与React的上下文

    ajax请求 react的组件中,一般我们在 componentDidMount事件中做ajax请求,并获得数据后...

网友评论

      本文标题:react 第四章—— ajax

      本文链接:https://www.haomeiwen.com/subject/gghjrctx.html