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
- 可以用在浏览器端和服务器
- React项目安装:
- fetch
- 不再适用XmlHttpRequest对象提交ajax请求
- fetch就是用来提交ajax请求的函数,只是新的浏览器才内置了fetch
- 为了兼容低版本的浏览器,可以引用fetch.js
- axios
在哪个方法去发送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
来源:简书
推荐阅读
-
React中的Ajax
-
如何在React中做Ajax 请求?
-
react中 ajax跨域请求
-
PHP获取不了React Native Fecth参数的解决办法
-
spring mvc中的@ModelAttribute注解示例介绍
-
IntelliJ IDEA中查看文件内所有已声明的方法(类似eclipse的outline)
-
IntelliJ IDEA中打开拼写检查与忽略提示曲线的方法
-
React中的“ajax”
-
Hibernate中设置MySQL的中文编码 博客分类: Hibernate中设置MySQL的中文编码 Hibernate中设置MySQL的中文编码
-
深入理解Android中的xmlns:tools属性