摘要：截至今天我們已經(jīng)通過承諾使用包建立我們的應(yīng)用程序安裝我們的遠(yuǎn)程對象獲取庫我們終于準(zhǔn)備好將遠(yuǎn)程數(shù)據(jù)集成到我們的應(yīng)用程序中。真的很有趣在任何情況下今天我們做了相當(dāng)多的工作獲取遠(yuǎn)程數(shù)據(jù)到我們的應(yīng)用程序。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3813
原文：https://www.fullstackreact.com/30-days-of-react/day-16/

我們的前端應(yīng)用與我們在其中顯示的數(shù)據(jù)一樣有趣。今天，我們開始提出數(shù)據(jù)請求，并將其集成到我們的應(yīng)用中。

截至今天, 我們已經(jīng)通過承諾, 使用 npm包建立我們的應(yīng)用程序, 安裝我們的遠(yuǎn)程對象獲取庫 (whatwg-fetch), 我們終于準(zhǔn)備好將遠(yuǎn)程數(shù)據(jù)集成到我們的應(yīng)用程序中。

我們安裝在 第14 天。fetch 庫后讓我們進(jìn)入使用它。

為了簡單起見, 讓我們從昨天從 api 服務(wù)器獲取當(dāng)前時(shí)間的示例中進(jìn)行演示:

此演示反應(yīng)組件對 api 服務(wù)器發(fā)出請求, 并從它的時(shí)鐘中報(bào)告當(dāng)前時(shí)間。在我們添加調(diào)用來獲取之前, 讓我們創(chuàng)建一些有狀態(tài)的組件, 我們將用來顯示時(shí)間并更新時(shí)間請求。

代碼警告墻
我們意識(shí)到, 接下來的幾行是 _代碼警告墻_, 我們通常試圖避免, 特別是沒有討論如何工作。然而, 由于我們不是在討論如何在這里詳細(xì)地創(chuàng)建一個(gè)組件, 但是我們還是要填寫一個(gè)完整的組件, 我們已經(jīng)破例了。
如果你希望我們改變今天的做法，請留下我們的反饋 (底部的鏈接),。

首先, 將顯示和獲取當(dāng)前時(shí)間的包裝組件的基礎(chǔ)如下所示。讓我們復(fù)制并粘貼到我們的應(yīng)用程序在src/App.js的代碼:

import React from "react";
import "whatwg-fetch";
import "./App.css";
import TimeForm from "./TimeForm";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentTime: null, msg: "now"
    }
  }

  // methods we"ll fill in shortly
  fetchCurrentTime() {}
  getApiUrl() {}
  handleFormSubmit(evt) {}
  handleChange(newState) {}

  render() {
    const {currentTime, tz} = this.state;
    const apiUrl = this.getApiUrl();

    return (
      

        {!currentTime &&
          
            Get the current time
          }
        {currentTime && 
The current time is: {currentTime}
}
        
        
We"ll be making a request from: {apiUrl}
      
    )
  }
}

export default App;

前面的組件是我們創(chuàng)建的基本狀態(tài)響應(yīng)組件。因?yàn)槲覀円@示一個(gè)表單, 我們已經(jīng)包括了 TimeForm 的預(yù)期用法, 讓我們創(chuàng)建下一個(gè)。

讓我們在我們的反應(yīng)應(yīng)用程序中使用 create-react-app. 來創(chuàng)建這個(gè)組件。將文件src/TimeForm.js 添加到我們的項(xiàng)目中:

touch src/TimeForm.js

現(xiàn)在, 讓我們添加內(nèi)容。我們希望我們的 TimeForm t能夠發(fā)揮作用, 允許用戶在瀏覽器中切換時(shí)區(qū)。我們可以通過創(chuàng)建一個(gè) stateful 組件來處理這個(gè), 我們稱之為 TimeForm。我們的TimeForm組件的外觀可能如下所示:

import React from "react"
const timezones = ["PST", "MST", "MDT", "EST", "UTC"]

export class TimeForm extends React.Component {
  constructor(props) {
    super(props);

    const {tz, msg} = this.props;
    this.state = {tz, msg};
  }

  _handleChange(evt) {
    typeof this.props.onFormChange === "function" && 
      this.props.onFormChange(this.state);
  }

  _changeTimezone(evt) {
    const tz = evt.target.value;
    this.setState({tz}, this._handleChange);
  }

  _changeMsg(evt) {
    const msg = 
      encodeURIComponent(evt.target.value).replace(/%20/, "+");
    this.setState({msg}, this._handleChange);
  }

  _handleFormSubmit(evt) {
    evt.preventDefault();
    typeof this.props.onFormSubmit === "function" &&
      this.props.onFormSubmit(this.state);
  }

  render() {
    const {tz} = this.state;

    return (
      

        
          {timezones.map(t => {
            return ({t})
          })}
        
        
        
      
    )
  }
}

export default TimeForm;

隨著這些組件的創(chuàng)建, 讓我們在瀏覽器中加載我們的應(yīng)用程序后, npm start 后運(yùn)行 , 我們將看到我們的形式 (雖然還沒有令人難以置信的美麗)。當(dāng)然, 在這一點(diǎn)上, 我們不會(huì)有一個(gè)正在運(yùn)行的組件, 因?yàn)槲覀儧]有實(shí)現(xiàn)我們的數(shù)據(jù)獲取。讓我們現(xiàn)在就開始吧。

正如我們昨天所說的, 我們將使用fetch() api 和承諾支持。當(dāng)我們調(diào)用fetch() 的方法, 它會(huì)返回我們的承諾, 在那里我們可以處理的要求, 但我們想要的。我們將向我們的 基于當(dāng)前 api 服務(wù)器發(fā)出請求 (所以如果在一段時(shí)間內(nèi)沒有運(yùn)行, 啟動(dòng)可能會(huì)很慢)。

我們將建立我們將請求的 url, 因?yàn)樗砹宋覀儗⒃诜?wù)器上請求的時(shí)間查詢。

我已經(jīng)在App 組件中定義了方法 getApiUrl() , 因此, 讓我們在中填充該函數(shù)。

慢性 api 服務(wù)器接受幾個(gè)變量, 我們將在表單中進(jìn)行自定義。它將采取的時(shí)區(qū)與一個(gè)慢性的消息。我們將簡單地開始, 并問慢性庫的 pst 時(shí)區(qū)和當(dāng)前時(shí)間 (now):

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentTime: null, msg: "now", tz: "PST"
    }
  }
  // ...
  getApiUrl() {
    const {tz, msg} = this.state;
    const host = "https://andthetimeis.com";
    return host + "/" + tz + "/" + msg + ".json";
  }
  // ...
export default App;

現(xiàn)在, 當(dāng)我們調(diào)用 getApiUrl() 時(shí), 下一個(gè)請求的 url 將返回給我們?，F(xiàn)在, 最后, 讓我們實(shí)現(xiàn)我們的fetch() 功能。fetch() 函數(shù)接受一些可以幫助我們自定義請求的參數(shù)。最基本的fetch() 請求只需要一個(gè) url 端點(diǎn)即可。fetch() 的返回值是一個(gè)承諾對象, 我們昨天深入了解過它。

讓我們更新我們的fetchCurrentTime() 方法, 從遠(yuǎn)程服務(wù)器獲取當(dāng)前時(shí)間。我們將在響應(yīng)對象上使用 .json() 方法將響應(yīng)的主體從 json 對象轉(zhuǎn)換為 javascript 對象, 然后通過將dateString 的響應(yīng)值設(shè)置為組件狀態(tài)中的currentTime 來更新我們的組件:

class App extends React.Component {
  // ...
  fetchCurrentTime() {
    fetch(this.getApiUrl())
      .then(resp => resp.json())
      .then(resp => {
        const currentTime = resp.dateString;
        this.setState({currentTime})
      })
  }
  // ...
}

今天我們項(xiàng)目的最后一部分是從窗體中獲取數(shù)據(jù), 以更新父組件。即, 當(dāng)用戶更新TimeForm 組件中的值時(shí), 我們希望能夠訪問App組件中的數(shù)據(jù)。TimeForm組件已經(jīng)為我們處理了這個(gè)過程, 所以我們只需要實(shí)現(xiàn)我們的表單功能。

當(dāng)一個(gè)狀態(tài)在窗體組件上發(fā)生變化時(shí), 它將調(diào)用一個(gè)稱為onFormChange的屬性。通過在App 組件中定義此方法, 我們可以訪問該表單的最新版本。

事實(shí)上, 我們將只調(diào)用setState() 來跟蹤表單允許用戶操作的選項(xiàng):

class App extends React.Component {

// ...
  handleChange(newState) {
    this.setState(newState);
  }

// ...
}

最后, 當(dāng)用戶提交表單時(shí) (按下按鈕 或者 按 回車 鍵在輸入字段中單擊), 我們將希望對時(shí)間提出另一個(gè)請求。這意味著我們可以定義我們的handleFormSubmit 的屬性, 只是調(diào)用 fetchCurrentTime()方法:

class App extends React.Component {

// ...
  handleFormSubmit(evt) {
    this.fetchCurrentTime();
  }

// ...
}

嘗試運(yùn)行演示和傳遞不同的慢速選擇。真的很有趣

在任何情況下, 今天我們做了相當(dāng)多的工作, 獲取遠(yuǎn)程數(shù)據(jù)到我們的應(yīng)用程序。然而, 在這一點(diǎn)上, 我們只有一頁的單頁應(yīng)用程序。如果我們想在我們的應(yīng)用程序中顯示不同的頁面呢？明天, 我們將開始在我們的應(yīng)用程序中添加多個(gè)頁面, 以便我們可以查看不同的視圖。