React網絡請求fetch之get請求

本文介紹下React下fetch的get使用步驟

 參考文章網絡請求之fetch

 

（1）編寫基礎組件模板

　　

 

 

 　　根組件引入

 　　

 

 

 　　

 

 

（2）json-server搭建模擬后台服務

　　 編寫模擬數據

　　

 

 

 　　自定義端口啟動

　　

　　測試如下

　　

 

 

 

 

 

（3）結合生命周期componentDidMount進行fetch網絡請求操作

　　

 　　注意：fetch后的then的response不是最終結果，可以測試下

　　

 

　　返回的response為流數據，需要用response.json()進行轉換，而該方法返回Promise對象，所以后續便有了類似then調用，結合文章網絡請求之fetch.上述代碼還可以做下完善如下

 　　

 

 　　接下來覆蓋state初始值並進行模板渲染即可

 

（4）覆蓋state初始狀態並渲染

　　

 

 　　

 

　　完整代碼如下：

import React,{Component} from 'react'

class FetchGet extends Component {
    constructor(props){
        super(props)
        this.state = {
            usersInfo:[]
        }
    }
    componentDidMount(){
        fetch('http://localhost:2222/users')
            .then((response)=>{
                return response.json()
            })
            .then((response)=>{
                this.setState({
                    usersInfo:response
                })
            }).catch((error)=>{
                console.log('錯誤'+error)
            })
    }
    render(){
        var {usersInfo} = this.state//解構賦值
        return (
            <div>
                <ul>
                    {
                        usersInfo.map((item,index)=>{
                            return (
                                <li key={index}>
                                    {item.id}
                                    {item.username}
                                    {item.age}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default FetchGet

　　

 

 

（5）細節點

　　1、盡量使用箭頭函數，因為箭頭函數沒有特定this指向

　　2、箭頭函數只有一個參數時，（）可以省略，所以上訴代碼如下

　　

 

 　3、采用ES2016的 async/await 語法進行進一步優化

　　詳見下面

 

（6）采用ES2016的 async/await 語法優化

　　對比如下

　　

　　此外在做下優化

因為response.json()也是異步的所以也需要await

　　

　　完整代碼：

import React,{Component} from 'react'

class FetchGet extends Component {
    constructor(props){
        super(props)
        this.state = {
            usersInfo:[]
        }
    }
    componentDidMount(){
        ;(async()=>{
            try{
                const response = await fetch('http://localhost:2222/users')
                const data = await response.json()//因為也是異步的所以也需要await
                this.setState({
                    usersInfo:data
                })
            }catch(error){
                console.log('Fetch Error: ', error)
            }
        })()
        /*
        fetch('http://localhost:2222/users')
            .then(response => {
                return response.json()
            })
            .then(response => {
                this.setState({
                    usersInfo:response
                })
            }).catch(error => {
                console.log('錯誤'+error)
            })
        */
    }
    render(){
        var {usersInfo} = this.state//解構賦值
        return (
            <div>
                <ul>
                    {
                        usersInfo.map((item,index)=>{
                            return (
                                <li key={index}>
                                    {item.id}
                                    {item.username}
                                    {item.age}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default FetchGet

 

 

 

　　

 

 

 

.