1. 理解
1.1. 前置說明
- React本身只關注於界面, 並不包含發送ajax請求的代碼
- 前端應用需要通過ajax請求與後臺進行交互(json數據)
- react應用中需要集成第三方ajax庫(或自己封裝)
- jQuery: 比較重, 如果需要另外引入不建議使用
- axios: 輕量級, 建議使用
1.2. 常用的ajax請求庫
1) 封裝XmlHttpRequest對象的ajax
2) promise風格
3) 可以用在瀏覽器端和node服務器端
2. axios
2.1. 文檔
地址: https://github.com/axios/axios
安裝axios: npm install axios
2.2. 相關API
1)GET請求
1 axios.get('/user?ID=12345') 2 .then(function (response) { 3 console.log(response.data); 4 }) 5 .catch(function (error) { 6 console.log(error); 7 }); 8 9 axios.get('/user', { 10 params: { 11 ID: 12345 12 } 13 }) 14 .then(function (response) { 15 console.log(response); 16 }) 17 .catch(function (error) { 18 console.log(error); 19 });
2)POST請求
1 axios.post('/user', { 2 firstName: 'Fred', 3 lastName: 'Flintstone' 4 }) 5 .then(function (response) { 6 console.log(response); 7 }) 8 .catch(function (error) { 9 console.log(error); 10 });
3. 案例
分析:
(1)App.jsx
1 import React, { Component } from 'react' 2 import Search from './components/Search' 3 import List from './components/List' 4 5 export default class App extends Component { 6 7 state = { //初始化狀態 8 users:[], //users初始值爲數組 9 isFirst:true, //是否爲第一次打開頁面 10 isLoading:false,//標識是否處於加載中 11 err:'',//存儲請求相關的錯誤信息 12 } 13 14 //更新App的state 15 updateAppState = (stateObj)=>{ 16 this.setState(stateObj) 17 } 18 19 render() { 20 return ( 21 <div className="container"> 22 <Search updateAppState={this.updateAppState}/> 23 <List {...this.state}/> 24 </div> 25 ) 26 } 27 }
(2) List.jsx
1 import React, { Component } from 'react' 2 import './index.css' 3 4 export default class List extends Component { 5 render() { 6 const {users,isFirst,isLoading,err} = this.props 7 return ( 8 <div className="row"> 9 { 10 isFirst ? <h2>歡迎使用,輸入關鍵字,隨後點擊搜索</h2> : 11 isLoading ? <h2>Loading......</h2> : 12 err ? <h2 style={{color:'red'}}>{err}</h2> : 13 users.map((userObj)=>{ 14 return ( 15 <div key={userObj.id} className="card"> 16 <a rel="noreferrer" href={userObj.html_url} target="_blank"> 17 <img alt="head_portrait" src={userObj.avatar_url} style={{width:'100px'}}/> 18 </a> 19 <p className="card-text">{userObj.login}</p> 20 </div> 21 ) 22 }) 23 } 24 </div> 25 ) 26 } 27 }
(3) Search.jsx
1 import React, { Component } from 'react' 2 import axios from 'axios' 3 4 export default class Search extends Component { 5 6 search = ()=>{ 7 //獲取用戶的輸入(連續解構賦值+重命名) 8 const {keyWordElement:{value:keyWord}} = this 9 //發送請求前通知App更新狀態 10 this.props.updateAppState({isFirst:false,isLoading:true}) 11 //發送網絡請求 12 axios.get(`/api1/search/users?q=${keyWord}`).then( 13 response => { 14 //請求成功後通知App更新狀態 15 this.props.updateAppState({isLoading:false,users:response.data.items}) 16 }, 17 error => { 18 //請求失敗後通知App更新狀態 19 this.props.updateAppState({isLoading:false,err:error.message}) 20 } 21 ) 22 } 23 24 render() { 25 return ( 26 <section className="jumbotron"> 27 <h3 className="jumbotron-heading">搜索github用戶</h3> 28 <div> 29 <input ref={c => this.keyWordElement = c} type="text" placeholder="輸入關鍵詞點擊搜索"/> 30 <button onClick={this.search}>搜索</button> 31 </div> 32 </section> 33 ) 34 } 35 }