react ajax
前置說明
1) React本身只關注於界面, 並不包含發送ajax請求的代碼
2) 前端應用需要通過ajax請求與后台進行交互(json數據)
3) react應用中需要集成第三方ajax庫(或自己封裝)
常用的ajax請求庫
1) jQuery: 比較重, 如果需要另外引入不建議使用
2) axios: 輕量級, 建議使用
a. 封裝XmlHttpRequest對象的ajax
b. promise風格
c. 可以用在瀏覽器端和node服務器端
3) fetch: 原生函數, 但老版本瀏覽器不支持
a. 不再使用XmlHttpRequest對象提交ajax請求
b. 為了兼容低版本的瀏覽器, 可以引入兼容庫fetch.js
axios:
文檔：https://github.com/axios/axios
相關API:
//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); }); //post axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
Fetch
文檔：
1) https://github.github.io/fetch/
2) https://segmentfault.com/a/1190000003810652
相關API:
//get fetch(url).then(function(response) { return response.json() }).then(function(data) { console.log(data) }).catch(function(e) { console.log(e) }); //post fetch(url, { method: "POST", body: JSON.stringify(data), }).then(function(data) { console.log(data) }).catch(function(e) { console.log(e) })
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
/*
需求:
1. 界面效果如下
2. 根據指定的關鍵字在github上搜索匹配的最受關注的庫
3. 顯示庫名, 點擊鏈接查看庫
4. 測試接口: https://api.github.com/search/repositories?q=r&sort=stars
*/
class MostStarRepo extends React.Component {
constructor (props) {
super(props)
this.state = {
repoName: '',
repoUrl: ''
}
}
componentDidMount () {
const url = `https://api.github.com/search/repositories?q=${this.props.searchWord}&sort=stars`
// const url = `https://api.github.com/search/repositories2?q=${this.props.searchWord}&sort=stars`
axios.get(url)
.then(response => {
const result = response.data
console.log(result)
const repo = result.items[0]
this.setState({
repoName: repo.name,
repoUrl: repo.html_url
})
})
.catch(error => {
// debugger
console.log(error)
alert('請求失敗 '+ error.message)
})
/*fetch(url, {method: "GET"})
.then(response => response.json())
.then(data => {
console.log(data)
if(data.message) {
alert(`請求失敗: ${data.message}`)
} else {
const repo = data.items[0]
this.setState({
repoName: repo.name,
repoUrl: repo.html_url
})
}
})*/
}
render () {
const {repoName, repoUrl} = this.state
if(!repoName) {
return <h2>loading...</h2>
} else {
return (
<h2>
most star repo is <a href={repoUrl}>{repoName}</a>
</h2>
)
}
}
}
ReactDOM.render(<MostStarRepo searchWord="r"/>, document.getElementById('example'))
</script>
</body>
</html>