React 快速上手 - 09 數據請求 fetch

時間  2019-11-17
標籤 react 快速 上手 數據 請求 fetch 欄目 React 简体版
原文   原文鏈接

react

本系列目錄

點贊是美德 : )前端

React 快速上手 - 09 數據請求 fetch

本文重點在 fetch 基礎使用、配置、實戰，若是你很熟練了，能夠直接 passnode

目標

  • 掌握 fetch 使用
    • 基礎使用
    • 詳細配置
    • 同步請求
    • 跨平臺 cross-fetch

環境

  • react 16.3.2
  • fetch 內置
  • cross-fetch 2.2.0

1 fetch 基礎使用

1.1 數據結構

我在 easy-mock 上準備了模擬數據react

www.easy-mock.com/mock/59801f…ios

[
  {
    "id": "610000200102261253",
    "name": "薛洋"
  },
  {
    "id": "350000199603020600",
    "name": "許磊"
  },
  {
    "id": "310000198105081812",
    "name": "崔娟"
  },
  {
    "id": "820000197101010860",
    "name": "石霞"
  }
]
複製代碼

一個列表，兩個字段 id namegit

1.2 讀取

fetch(
    'https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/all'
  )
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({users: data})
    })
    .catch(e => console.log('錯誤:', e))
複製代碼

fetch 是瀏覽器內置對象，因此咱們不用安裝包，直接使用github

  • 使用流程
    • fetch ...
    • then => res.json()
    • then => data

注意須要執行一次 res.json() 方法才能獲取數據json

1.3 打印

咱們獲取數據後，設置 state ，而後正常數據 render 就行，完整代碼redux

import React, {Component} from 'react'

class RequestView extends Component {
  constructor(props) {
    super(props)
    this.state = {users: []}
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    fetch(
      'https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/all'
    )
      .then(res => res.json())
      .then(data => {
        console.log(data)
        this.setState({users: data})
      })
      .catch(e => console.log('錯誤:', e))
  }

  render() {
    return (
      <div> <input type="button" value="點擊 http-get 方式獲取數據" onClickCapture={this.handleClick} /> <ul> {this.state.users && this.state.users.map((item, index) => ( <li key={index.toString()}>{item.name}</li> ))} </ul> </div> ) } } 複製代碼

打印axios

fetch

  • codepen

codepen.io/ducafecat/p…segmentfault

2 fetch 配置

咱們來好好的看下這個 fetch() 全局方法

fetch-init-1
fetch-init-2

我舉兩個自定義例子，你們體會下

2.1 form 提交

2.1.1 定義 Headers 請求頭協議說明

let initHeaders = new Headers()
initHeaders.append('Accept', 'application/json, text/plain, */*')
initHeaders.append('Cache-Control', 'no-cache')
initHeaders.append('Content-Type', 'application/x-www-form-urlencoded')
複製代碼
  • 由於是表單，因此設置 application/x-www-form-urlencoded

2.1.2 定義 init 配置

let data = {uid: 1011}
let body = `uid=${data.uid}`

const init = {
  method: 'POST',
  credentials: 'include', // cookies
  cache: 'no-cache ', // cookies
  headers: initHeaders,
  body
}
複製代碼
  • method 指定 POST 方式
  • credentials: 'include' 表示每次都帶上 cookies
  • headers 請求頭協議說明
  • body 數據，格式 key=val&key=val&key=val

2.1.3 請求提交

fetch(
  'https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/login',
  init
)
  .then(res => res.json())
  .then(data => {
    this.setState({user: data})
  })
  .catch(e => console.log('錯誤:', e))
複製代碼

這裏就相似咱們第一個基礎例子了

  • codepen

codepen.io/ducafecat/p…

2.2 raw 提交

2.2.1 定義 Headers

let initHeaders = new Headers()
initHeaders.append('Accept', 'application/json, text/plain, */*')
initHeaders.append('Cache-Control', 'no-cache')
initHeaders.append('Content-Type', 'application/json;charset=UTF-8')
複製代碼
  • Content-Type 類型須要定義成 application/json;charset=UTF-8

2.2.2 定義 init

let data = {uid: 1011}
let body = JSON.stringify(data, null, 2)

const init = {
  method: 'POST',
  credentials: 'include', // cookies
  cache: 'no-cache ', // cookies
  headers: initHeaders,
  body
}
複製代碼
  • json 數據須要格式化 JSON.stringify(data, null, 2)

2.2.3 請求提交

fetch(
  'https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/login',
  init
)
  .then(res => res.json())
  .then(data => {
    this.setState({user: data})
  })
  .catch(e => console.log('錯誤:', e))
複製代碼
  • codepen

codepen.io/ducafecat/p…

2.3 完整例子

代碼

import React, {Component} from 'react'

class RequestView extends Component {
  constructor(props) {
    super(props)
    this.state = {user: null}
    this.handlePostForm = this.handlePostForm.bind(this)
    this.handlePostJSON = this.handlePostJSON.bind(this)
  }
  handlePostForm() {
    let initHeaders = new Headers()
    initHeaders.append('Accept', 'application/json, text/plain, */*')
    initHeaders.append('Cache-Control', 'no-cache')
    initHeaders.append('Content-Type', 'application/x-www-form-urlencoded')

    let data = {uid: 1011}
    let body = `uid=${data.uid}`

    const init = {
      method: 'POST',
      credentials: 'include', // cookies
      cache: 'no-cache ', // cookies
      headers: initHeaders,
      body
    }
    fetch(
      'https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/login',
      init
    )
      .then(res => res.json())
      .then(data => {
        this.setState({user: data})
      })
      .catch(e => console.log('錯誤:', e))
  }
  handlePostJSON() {
    let initHeaders = new Headers()
    initHeaders.append('Accept', 'application/json, text/plain, */*')
    initHeaders.append('Cache-Control', 'no-cache')
    initHeaders.append('Content-Type', 'application/json;charset=UTF-8')

    let data = {uid: 1011}
    let body = JSON.stringify(data, null, 2)

    const init = {
      method: 'POST',
      credentials: 'include', // cookies
      cache: 'no-cache ', // cookies
      headers: initHeaders,
      body
    }
    fetch(
      'https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/login',
      init
    )
      .then(res => res.json())
      .then(data => {
        this.setState({user: data})
      })
      .catch(e => console.log('錯誤:', e))
  }

  render() {
    return (
      <div>
        <input
          type="button"
          value="點擊 http-post form 表單"
          onClickCapture={this.handlePostForm}
        />
        <br />
        <input
          type="button"
          value="點擊 http-post json raw 格式"
          onClickCapture={this.handlePostJSON}
        />
        {this.state.user && (
          <ul>
            <li>ID: {this.state.user.id}</li>
            <li>Name: {this.state.user.name}</li>
          </ul>
        )}
      </div>
    )
  }
}

export default RequestView

複製代碼

動圖效果

fetch-form-raw

3 fetch 同步 async / wait

3.1 同步寫法

async handleClick() {
  try {
    const res = await fetch(
      'https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/all'
    )
    const users = await res.json()
    this.setState({users})
  } catch (error) {
    console.log('錯誤', error)
  }
}
複製代碼
  • 函數自己要定義成 async
  • res.json() 這個方法不要忘記調用
  • 異常處理要用 try ... catch ...

3.2 完成例子

代碼

import React, {Component} from 'react'

class RequestView extends Component {
  constructor(props) {
    super(props)
    this.state = {users: []}
    this.handleClick = this.handleClick.bind(this)
  }
  async handleClick() {
    try {
      const res = await fetch(
        'https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/all'
      )
      const users = await res.json()
      this.setState({users})
    } catch (error) {
      console.log('錯誤', error)
    }
  }

  render() {
    return (
      <div> <input type="button" value="點擊 async / await 方式獲取數據" onClickCapture={this.handleClick} /> <ul> {this.state.users && this.state.users.map((item, index) => ( <li key={index.toString()}>{item.name}</li> ))} </ul> </div> ) } } export default RequestView 複製代碼

打印

fetch-await

4 fetch 兼容性

好像 fetch 很強啊，不用安裝包，全局方法直接用，可是有一個小問題，對瀏覽器的依賴，先看下 caniuse 平臺的報告:

caniuse-fetch

IE 全陣亡，低版本 Safari 兼容問題，Firefox Chrome Opera 若是特性不開的話也會出問題，懂的同窗說能夠瀏覽器配置和打 polyfill 補丁，可是這樣須要本身作不少工做，若是你的代碼須要跑到 node 端呢（由於API 業務層頗有可能複用性很高）。

若是考慮兼容性，因此咱們仍是用第三方組件

5 cross-fetch 組件

5.1 介紹

cross-fetch

cross-fetch

感受 Star 不是不少麼。。。

接着往下看

5.2 多平臺支持

README 裏說了各類平臺支持、知名項目也在用

是真的麼。。。

接着往下看

Supported environments

5.3 包研究

打開文件 package.json

dependencies

來看下這兩個包

  • node-fetch

github.com/bitinn/node…

node-fetch

  • whatwg-fetch

ducafecat_2018-05-27-16-08-31

指向了 github/fetch

  • github/fetch

github.com/github/fetc…

github-fetch

好多 Star 看着就放心，你們用吧

5.4 例子

  • 安裝
yarn add cross-fetch
複製代碼
  • 代碼
import React, {Component} from 'react'
import fetch from 'cross-fetch'

class RequestView extends Component {
  constructor(props) {
    super(props)
    this.state = {users: []}
    this.handleClick = this.handleClick.bind(this)
  }
  async handleClick() {
    try {
      const res = await fetch(
        'https://www.easy-mock.com/mock/59801fd8a1d30433d84f198c/example/user/all'
      )
      const users = await res.json()
      this.setState({users})
    } catch (error) {
      console.log('錯誤', error)
    }
  }

  render() {
    return (
      <div> <input type="button" value="點擊 cross-fetch 組件方式 獲取數據" onClickCapture={this.handleClick} /> <ul> {this.state.users && this.state.users.map((item, index) => ( <li key={index.toString()}>{item.name}</li> ))} </ul> </div> ) } } export default RequestView 複製代碼
  • 打印

Cross-Fetch

代碼

參考

© 會煮咖啡的貓咪

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程