Каталог этой серии

• 01 Предисловие
• 02 Настройка среды разработки
• 03 Леса для создания проекта Все является компонентом
• 04 Основные функции JSX, реквизит, состояние, жизненный цикл, событие, стиль
• 05 Управление рендерингом компонентов
• 06 Компоненты контейнера, компоненты дисплея
• 07 Реакция-маршрутизатор внешней маршрутизации
• 08 Реакция управления состоянием
• 09 Выборка запроса данных
• 10 Проверка типов свойств

Лайк - это добродетель :)

---

Быстрый старт React – 09 Запрос данных

Эта статья посвященаfetchОсновное использование, конфигурация, реальный бой, если вы очень опытны, вы можете пройти напрямую

Цель

• владелецfetchиспользовать
  • Основное использование
  • Подробная конфигурация
  • синхронный запрос
  • Кросс-платформенная кросс-выборка

окружающая обстановка

• react 16.3.2
• встроенный
• cross-fetch 2.2.0

1 выборка базового использования

1.1 Структура данных

я здесьeasy-mockМакетные данные, подготовленные на

Woohoo.easy-mock.com/mock/59801…

[
  {
    "id": "610000200102261253",
    "name": "薛洋"
  },
  {
    "id": "350000199603020600",
    "name": "许磊"
  },
  {
    "id": "310000198105081812",
    "name": "崔娟"
  },
  {
    "id": "820000197101010860",
    "name": "石霞"
  }
]

один список, два поляid name

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Это встроенный объект браузера, поэтому нам не нужно устанавливать пакет и использовать его напрямую.

• руководство
  • fetch ...
  • then => res.json()
  • then => data

Обратите внимание, что его нужно выполнить один разres.json()метод получения данных

1.3 Печать

После того, как мы получим данные, установимstate, то нормальные данныеrenderхорошо, полный код

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>
    )
  }
}

Распечатать

• codepen

код спрей.IO/read cafe cat/afraid...

2 выбор конфигурации

Давайте внимательно посмотрим на этоfetch()глобальный метод

Позвольте мне дать вам два пользовательских примера для вашего опыта.

2.1 Отправка формы

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

код спрей.IO/read cafe cat/afraid...

2.2 необработанное представление

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

код спрей.IO/read cafe cat/afraid...

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

Эффект движущегося изображения

3 выборки синхронизации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

Распечатать

4 выборка совместимости

подобноfetchОчень сильный, не нужно устанавливать пакеты, глобальный метод можно использовать напрямую, но есть небольшая проблема, зависимость от браузера, посмотрите сначалаcaniuseПлатформа сообщает:

IEВсе убито, нижняя версияSafariПроблемы совместимости,Firefox Chrome OperaЕсли фича не включена будут проблемы.Студенты которые разбираются говорят что можно настроить и играть в браузере.polyfillпатч, но это требует много работы самостоятельно, если ваш код должен выполняться доnodeконец (потому чтоAPI 业务层Очень вероятно, что многоразовость высока).

Если рассматривать совместимость, значит, мы по-прежнему используем сторонние компоненты.

5 компонентов кросс-выборки

5.1 Введение

cross-fetch

ЧувствоватьStarНе так много. . .

Затем посмотрите вниз

5.2 Мультиплатформенная поддержка

В README говорится, что поддерживаются различные платформы и известные проекты также используют

Это правда. . .

Затем посмотрите вниз

5.3 Пакетные исследования

открыть файлpackage.json

Взгляните на эти два пакета

• node-fetch

GitHub.com/snotty girl/node…

• whatwg-fetch

указал наgithub/fetch

• github/fetch

GitHub.com/GitHub/F и т. д.…

Не волнуйтесь, если вы смотрите на много звезд, давайте использовать это

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

• Распечатать

код

• 7-1-requestFetch.js
• 7-2-requestFetchConfig.js
• 7-3-requestFetchAwait.js
• 7-4-requestCrossFetch.js

Ссылаться на

• fetch
• axios
• XMLHttpRequest
• cross-fetch
• Выбор совместимости
• Headers
• polyfill-fetch
• node-fetch

---

© Кот, умеющий варить кофе