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

時間  2019-11-06
標籤 react 學習 發送 ajax 請求 以及 mock 數據 欄目 React 简体版
原文   原文鏈接

前言

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

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

而後將真實的數據填充到頁面上 那麼應該在哪一個生命週期函數中發起請求? 又如何發起Ajax請求呢以及有哪些方式? 以及咱們怎麼樣模擬一個後端數據接口?java

那麼本小節就是你想要知道的react

若是想閱讀體驗更好,可戳該連接,React中發送Ajax請求以及Mock數據jquery

示例API返回以下json對象

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

{
  "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文件夾內ios

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

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

請求後臺數據,UI渲染結果.png
固然對於UI以什麼樣的方式來顯示,你本身能夠用css進行控制的，這不是文本的重點

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

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

可是官方推薦放在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請求數據的方法，下面以.ge()t爲例,至於.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請求數據

這個不只僅是在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方法(嚐鮮,顯逼格用)
  • juery 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的Map Tools.png
對charles進行本地化配置.png
charles使用,加載本地文件.png
注意：charles的port端口號與React本地啓動的服務端口號一致便可

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

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

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

使用mockoon進行mock本地數據

使用該方式時,須要你去官方下載mockoon工具

官網地止:mockoon.com/

mockoon配置以下所示
mockoon配置.png

使用Easy Mock僞造數據

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

官網地止:easy-mock.com

easy-mock.png

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,可是其餘方式也不賴,要是否是線上的,斷網了

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

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

有時候,也不會弔死在一棵樹上,要相信,辦法總比困難要多

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