前言
在上一篇文章裏，我們為大家介紹瞭如何創建SPFx Web部件，但是沒有説如何獲取SharePoint 網站數據。這篇文章，我們就為大家演示，如何利用列表數據模型和SharePoint SPFx模塊，讀取SharePoint 網站數據並展示出來。
正文
1.提前創建好數據列表，如下圖：
2.用Visual Studio Code打開Web部件文件，如下圖：
3.在頭部定義列表模型，如下圖：
export interface ISPLists { value: ISPList[]; }
export interface ISPList { Title: string; Id: string; }
4.添加執行REST API請求的幫助程序類 spHttpClient
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
5.添加列表模型和幫助程序類位置，如下圖：
6.添加請求數據的方法，調用REST服務獲取數據，方法如下：
private _getListData(): Promise<ISPLists> { return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('MyList')/items`, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { return response.json(); }); }
7.添加渲染數據的方法，渲染成我們需要展示的格式，方法如下：
private _renderList(items: ISPList[]): void { let html: string = ''; items.forEach((item: ISPList) => { html += `<div>${item.Title}</div>`; }); const listContainer: Element = this.domElement.querySelector('#MyContainer'); listContainer.innerHTML = html; }
8.修改渲染Web部件的方法，將獲取的數據渲染到Web部件，方法如下：
public render(): void { this.domElement.innerHTML = `<div id="MyContainer" />`; this._getListData() .then((response) => { this._renderList(response.value); }); }
9.添加方法的位置，如下圖：
10.在SharePoint Online站點中測試SPFx Web部件，如下圖：
結束語
至此，我們看到SPFx Web部件，已經獲取到了SharePoint Online站點中的列表數據。之後，我們就可以把部件部署到網站中，使用了。
