欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React中的“ajax”

程序员文章站 2024-02-27 22:50:57
...

React中的“ajax”

  • React没有ajax模块
  • 集成其他的js库(如axios/fetch/jquery),发送ajax请求
    • axios
      • React项目安装:yarn add axios
      • 封装XmlHttpRequest对象的ajax
      • promise
      • 可以用在浏览器端和服务器
    • fetch
      • 不再适用XmlHttpRequest对象提交ajax请求
      • fetch就是用来提交ajax请求的函数,只是新的浏览器才内置了fetch
      • 为了兼容低版本的浏览器,可以引用fetch.js

在哪个方法去发送ajax请求

  • 只显示一次(请求一次):
    componentDidMount()

  • 显示多次(请求多次):
    componentWillReceiveProps()

下面记录一个小例子:

  class UserGist extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        lastGistUrl: null
      };
    }
    componentDidMount() {
      const url = `https://api.github.com/users/${this.props.name}/gists`
      axios.get(url)
          .then((response) => {
            console.log(response.data)
            var data = response.data;

            var lastGist = data[0];
            this.setState({
              lastGistUrl: lastGist.html_url
            });
          })
          .catch((error) => {
            console.log(error.response.data);
          });

      /*fetch(url).then(
          (response) => {
            response.json().then((result) => {
              console.log(result);
              var lastGist = result[0];
              this.setState({
                lastGistUrl: lastGist.html_url
              });
            })
          },
          (error) => {
            console.log(error);
          }
      );*/
    }

    render() {
      if(this.state.lastGistUrl===null) {
        return <h2>loading...</h2>
      } else {
        return (
            <div>
              {this.props.name}'s last gist is <a href={this.state.lastGistUrl}>here</a>
            </div>
        );
      }
    }
  }

  var name = 'octocat'
  ReactDOM.render(<UserGist name={name}/>, document.getElementById('example'));

这里可以提一点:axios跟fetch的异同。

  • axios跟fetch都是把ajax的请求包裹成promise对象的形式来进行的。
  • axios是一种对ajax的封装,fetch是一种浏览器原生实现的请求方式,跟ajax对等

说的这里就联想到同源策略已经跨域安全方面的事情。

  • 首先,一提到如何解决跨域,大家的反应都是jsonp或者cors或者websocket,这里再补充一下jsonp跟cors的点点区别

    • jsonp因为是通过src 异步动态增加一个scrip标签 同时定义callback 来支持跨域,所以它只支持get方式的跨域请求,因为src只能支持get方式。但是cors既可以支持get也可以支持post

作者:zhangjingbibibi
链接:https://www.jianshu.com/p/6e5151254016
来源:简书