React基礎(9)-React 中發送 Ajax 請求以及 Mock 數據

 前言

在 React 中,render 函數返回的結果,取決於組件的 props 和 state

咱們都知道 UI 頁面上的數據不是寫死的,每每是從後端的數據接口中拿到的

而後將真實的數據填充到頁面上 ,那麼應該在哪一個生命週期函數中發起請求?

又如何發起 Ajax 請求呢以及有哪些方式? 以及咱們怎麼樣模擬一個後端數據接口?

示例 API返回以下 json對象

假如後端返回的商品列表以下所示

{

 "goodLists": [

 {"id": 1, "name": "瓜子", "price": 10, "address": "廣東"},

 {"id": 2, "name": "蘋果", "price": 20, "address": "北京"}，

 {"id": 3, "name": "橘子", "price": 8, "address": "湖南"}，

 {"id": 4, "name": "桃子", "price": 13, "address": "北京"},

 {"id": 5, "name": "榴蓮", "price": 18, "address": "海南"}

 ]

}

把這段商品列表的json代碼命名爲goodlist.json,放到根目錄public的api文件夾內

在public目錄下的api文件夾下均可以放置你本身模擬的數據,該模擬的數據文件只能放置在public目錄下,不然就會報錯,不生效的

對應的 UI 效果顯示:以下所示

固然對於 UI 以什麼樣的方式來顯示,你本身能夠用 css 進行控制的，這並非文本的重點

在哪一個生命週期函數中發送 AJax 請求

把Ajax請求放在componentWillMount組件即將被掛載的函數中也是能夠的

可是官方推薦放在componentDidMount這個生命週期函數中發起Ajax請求,由於執行這個生命週期時,DOM已經掛載完了

這樣作能夠拿到Ajax請求返回的數據並經過setState來更新組件

componentDidMount(){

 // 在這裏進行Ajax數據請求，axios,fetch,jquery Ajax或者request均可以

}

如何發送 AJax 請求？

在React中,你可使用你喜歡的Ajax庫,例如：Axios,瀏覽器內置的feach方法,JQuery Ajax,或是第三方庫request,下面就逐一來看看的

• 方式一使用Axios發送Ajax請求

該方式不管是Vue仍是React甚至其餘一些框架中,都廣泛經常使用,它支持promise方式，在使用axios庫以前,應該先在終端下使用npm或者cnpm全局安裝一下

npm install -S axios

或者cnpm install -S axios

或者yarn add axios

安裝完axios後,在須要使用請求數據的文件最上面,引入axios庫,以下代碼所示,下面是上面示例API的具體代碼

import React, { Fragment, Component } from 'react';

import ReactDOM from 'react-dom';

import axios from 'axios'; // 引入axios庫

import './style.css';

class List extends Component {

 constructor(props) {

 super(props);

 this.baseUrl = '/api/goodlist'; // 這裏是本地模擬,在public下建立一個api文件,放置一個json文件，這裏的路徑直接是根路徑便可,react會自動的找到這個目錄

 // this.baseUrl = 'http://localhost:4000/api/goodlist'; // 這種方式是使用代理的方式,這裏用的是mockoon工具

 // this.baseUrl = 'https://easy-mock.com/mock/5b24e12cf076d94c646a9aa2/api/googlists'; //這是使用easy-mock

 this.state = {

 list: [],

 };

 }

 render() {

 const { list } = this.state;

 return (

 <Fragment>

 <ul>

 {list.map((item) => {

 const isRed = item.price >= 10 ? 'red' : '';

 return (

 <li key={item.id}>

 {item.name}-<span className={isRed}>{item.price}￥</span>-

 {item.address}

 </li>

 );

 })}

 </ul>

 </Fragment>

 );

 }

 // Ajax請求放在componentDidMount生命週期內

 componentDidMount() {

 // 使用axios完成ajax數據請求

 axios

 .get(this.baseUrl)

 .then((res) => {

 const { goodlists } = res.data;

 this.setState({

 list: goodlists,

 });

 })

 .catch((err) => {

 console.log(err);

 });

 }

}

const container = document.getElementById('root');

ReactDOM.render(<List />, container);

上面的代碼就是在componentDidMount中發起Ajax請求,用axios請求數據

拿到數據後,而後經過setState去更新組件的state的數據渲染到頁面上

同時,當價格大於 10 時,進行了一些邏輯判斷,讓價格大於 10 的變紅色,在 JSX 裏面是能夠插值表達式的方式進行一些特殊處理的

注意:本地模擬數據的json文件(這裏是goodlist.json),放置的位置只能是放置在根目錄public目錄文件夾下,若放置在其餘處,是不起做用的

之因此放在public能起做用,訪問的路徑直接是根路徑便可,webpack作了一些處理,react會自動的找到這個目錄

• 方式二:使用瀏覽器內置的fetch方法

該方法是瀏覽器標準的一個接口,提供了一種簡單合理的方式來跨網絡異步的獲取資源數據,如今也是愈來愈流行使用的,一樣 Ajax 請求也是放在componentDidMount組件掛載完以後進行數據請求,以下代碼所示

componentDidMount(){

 // 使用fetch,這裏的地止換成上面的this.baseUrl也是能夠的

 fetch('/api/goodlist')

 .then(res => res.json())

 .then((result) => {

 console.log(result);

 const { goodlists } = result;

 this.setState({

 list: goodlists

 })

 },

 // 注意在這裏處理錯誤時,與axios有些區別,不是用catch()去捕獲錯誤,由於使用catch去捕獲異常會掩蓋掉組件自己可能產生的bug

 (error) => {

 console.log(error);

 }

 )

 }

上面使用的是fetch的方式請求數據,fetch是前沿的標準,它是Ajax的替代品,它的API是基於Promise設計的,舊版本的瀏覽器不支持fetch,須要用polyfill es6-promise

具體更詳細的fetch使用,可參照MDN文檔的

• 方式三:使用JQ的Ajax

  jquery是一個庫,在React中你想要用時,得先安裝,使用該方法請求數據不是不能夠,可是不推薦

npm install -S jquery

或者

cnpm install -S jquery

而後在你須要請求數據的文件處,引入jquery

import $ from 'jquery';

而後在componentDidMount生命週期函數內,使用jquer請求數據的方法，下面以$.get()爲例,$至於$.post(),$.ajax()使用方式可自行查閱的

componentDidMount(){

 /*

 $.get('/api/goodlist', function(res){

 console.log(res);

 this.setState({

 list: res.goodLists

 })

 }.bind(this)) // 這裏必須手動綁定this

 */

 // 等價於下面的,若是不手動綁定,可使用箭頭函數,避免this的綁定

 $.get('/api/goodlist', (res) => {

 console.log(res);

 const { goodlists } = res;

 this.setState({

 list: goodlists

 })

 })

 }

上面是使用jquery中提供的方法Ajax請求數據,咱們只須要請求一數據,但卻要把整個jquery庫都給引入進來,這個按照當今的按需加載模塊化開發的話，是很是不合理的，因而就有了fetch,和axios的解決方案

在React中推薦使用axios或者fetch的方式進行Ajax請求數據

• 方式四:使用 request 庫: https://github.com/request/re...

這個不只僅是在Vue,React等框架中使用,在微信小程序裏Ajax請求數據也是支持的

這個request模塊也是很是流行和好用的,在這裏不提一下,都以爲埋沒了的

使用時,先要安裝request模塊而後在安裝request-promise模塊,由於request-pormise是依賴於request,因此兩個依賴都得依次安裝

npm install -S request

npm install -S request-promise

而後在你須要使用請求數據的文件上方引入request-promise庫,調用一個rp函數

import rp from 'request-promise';

而後在componentDidMount內進行Ajax的數據請求,以下代碼所示

componentDidMount(){

 // 使用request-promise請求數據

 // 注意這裏的this.baseUrl不支持/api/goodlist.json方式,下面的this.baseUrl是http://localhost:4000/api/goodlist,以及真實的地止,都是能夠的

 rp(this.baseUrl)

 .then(res => {

 // 這裏要注意的是res返回的是一個字符串,須要用JSON.parse()方法將字符串轉化爲json對象

 const { goodlists } = JSON.parse(res);

 this.setState({

 list: goodlists

 })

 })

 .catch(error => {

 console.log(error);

 })

 }

上面是使用request-promise的方式實現Ajax數據的請求也是能夠的,注意使用該方式時,沒法使用本地mock數據的

它也是支持promise對象,注意,當返回成功的response的類型是一個json字符串格式,你須要用JSON.parse()的方式

將json字符串,轉化爲json對象,而後作處理的

若是你是使用axios的方式請求數據,那麼是不用進行json序列的格式化的

小結

在React中請求數據的幾種方式

• axios(廣泛經常使用)
• fetch方法(嚐鮮,顯逼格用)
• jquery Ajax(不推薦使用)
• request(經常使用,僅次於axios使用頻率)

注意: 都是放在componentDidMount函數中進行數據請求的

在本地的public目錄下mock本地數據

這種方式比較簡單,直接在工程public目錄下建立一個api文件夾,新建一個json文件就能夠了

若使用axios進行數據的請求,或者fetch的方式,url以反斜槓/開頭就能夠了,如上示例代碼所示,可是如果request的方式，url寫成反斜線/的方式是不生效的

使用request的方式,須要帶上http協議,它也支持線上接口

如果遇到跨域問題,在請求頭 headers 中,添加Access-Control-Allow-Origin: *便可

這個咱們在稍後的 mockoon 工具中會介紹到

react-ajax

├── package-lock.json

├── package.json

├── public // 在該目錄下建立一個api文件夾,把須要的模擬的數據放在一個json文件便可

│ ├── api

│ │ └── goodlist.json

│ ├── favicon.ico

│ ├── index.html

│ └── manifest.json

├── README.md

├── src

│ ├── App.js

│ ├── index.js

│ └── style.css

└── yarn-error.log

使用 charles 抓取本地化模擬數據

charles是一款代理服務器,經過將本身設置成系統的網絡訪問代理服務器,而後截取請求和請求結果達到分析抓包的目的,該軟件是用java寫的,安裝charles的時候,先要裝好Java壞境,也就是Jdk壞境的設置

下面就來看看charles的簡單具體使用

先百度百科 charles 下載該工具,下一步,下一步安裝就好,固然你在後臺回覆【charles 下載】也是獲取到的

使用方式以下所示:

注意：charles的port端口號與React本地啓動的服務端口號一致便可

在你沒有配置charles工具代理服務時,若該假數據的文件放置在項目根目錄public以外,這時請求url,/api/goodlist是會報錯的

換而言之,假數據放置在public目錄下,不使用charles等其餘代理工具，也能成功,由於在React中的webpack自動的幫你處理了,會自動的找到public目錄下的文件

固然除了charles還有mockoon等其餘一些工具的

使用 mockoon 進行 mock 本地數據

使用該方式時,須要你去官方下載mockoon工具,固然你若懶於百度谷歌,你在後臺回覆【mockoon】,這裏我只提供了 windows 版本的,linux 與 Mac 用戶可自行解決

官網地止:https://mockoon.com/

mockoon配置以下所示

 使用 Easy Mock 僞造數據

Easy Mock 這是大搜車技術團隊一個開源僞造數據的工具,是一個可視化，而且能快速生成模擬數據的持久化服務

官網地止:https://easy-mock.com

easy-mock結合了mock.js,支持接口代理,Restful風格等很是好用的功能

把上面代碼中的baseUrl換成線上easy-mock的就能夠了

this.baseUrl =

 'https://easy-mock.com/mock/5b24e12cf076d94c646a9aa2/api/googlists';

至於更多easy-mock工具的使用,本身能夠多試一試的,有了它,就能夠不依賴後端接口了,等後端接口弄好了,直接替換就能夠了的

小結

mock本地數據的幾種方式

• 在本地的public目錄下mock本地數據(最簡單粗暴,經常使用)
• 使用charles抓取本地化模擬數據
• 使用mockoon進行mock本地數據
• 使用easy-mock僞造接口數據(推薦多用)

結語

本文主要講解了React中如何發送Ajax請求,其中發送請求放置的地方應當在componentDidMount組件掛載完這個生命週期內,而發送Ajax的方式有axios,fetch,Jquery Ajax,以及request的方式,其中axios與fetch,request是主流的方式

同時介紹了在項目的根目錄 public 文件夾下放置模擬的假數據,我的以爲這個很簡單粗暴,可是惟一不足是你得本身手動的編寫數據

而利用 charles 和 mockoon 工具攔截本地的請求,mock 數據,須要你額外的配置一下的

固然最後介紹了easy-mock這個很是好用的模擬後端假數據的工具

以上的代理數據模擬手段選擇其中一種本身喜歡的就能夠了,工具無好壞之分,本身用的爽就能夠,不過我的推薦使用easy-mock,可是其餘方式也不賴,要是否是線上的,斷網了

那麼其餘方法就比較適用了，之因此介紹了不一樣的工具,主要是開拓本身的思路

這個工具用得不爽,就用另一個的,總有一個適合本身的