【react讀取文件】react發送GET請求讀取靜態文件

react中，使用發送請求的方式把static文件夾中的前端可訪問的靜態文件讀取成字符串：

1、new request，需要用到getRequestHeaders組件

2、fetch獲取response

3、return response.text() 獲取文件內容（關於response對象的屬性和方法見：https://developer.mozilla.org/zh-CN/docs/Web/API/Response 。在這里，return response.tx()返回的是一個promise對象，這里我也沒搞懂，promise對象到底是什么，以及到底是同步的還是異步的，后續還需要再看一下。https://www.cnblogs.com/whybxy/p/7645578.html ）

import React, { Component } from 'react';

import { getRequestHeaders } from '../setupAjaxHeaders';
import HyperDown from 'hyperdown';

import './ReadMePage.css';


class ReadMePage extends Component {
    constructor(props){
        super(props);

        this.state={ readmeHtml:undefined, };
    }

   
    render(){
        
        const getArtifactRequest = new Request(require('../static/readme.md'), {
            method: 'GET',
            headers: new Headers(getRequestHeaders(document.cookie))
        });


        fetch(getArtifactRequest).then((response) => {
            return response.text()
        }).then((text) => {
            const parser=new HyperDown;
            this.state.readmeHtml=parser.makeHtml(text);
            this.setState({
                readmeHtml:parser.makeHtml(text),
            });
            return <div id="readMeBody" dangerouslySetInnerHTML={{__html:this.state.readmeHtml}}></div>;
        });
return <div id="readMeBody" dangerouslySetInnerHTML={{__html:this.state.readmeHtml}}></div>;

    }

}


export default ReadMePage;

 

注意，要保存代碼中動態生成的結果，必須在構造函數中定義 this.state={resultname:undefined, } 並在生成結果時調用this.setstate({ resultname:result, })，然后后續調用的時候使用this.state.resultname

 

注意，request獲取response之后，response.text()需要通過return再then才能獲取到，直接使用是獲取不到的