SPFX WebPart TSX：如何在componentDidMount中调用多REST请求

你可以通过以下几种方式在componentDidMount中添加第二个REST请求，获取列表模板数据：

方法一：嵌套AJAX调用（顺序执行） #

如果需要确保第一个请求完成后再发起第二个，可采用嵌套写法：

public componentDidMount() {
  const reactContextHandler = this;
  // 第一个请求：获取非隐藏站点列表
  jQuery.ajax({
    url: `${GetSpLists.siteurl}/_api/web/lists?$select=Title&$filter=Hidden eq false`,
    type: "GET",
    headers: { 'Accept': 'application/json;odata=verbose;' },
    success: function (listResult) {
      reactContextHandler.setState({ sitecontents: listResult.d.results });
      // 嵌套第二个请求：获取列表模板
      jQuery.ajax({
        url: `${GetSpLists.siteurl}/_api/web/ListTemplates/`,
        type: "GET",
        headers: { 'Accept': 'application/json;odata=verbose;' },
        success: function (templateResult) {
          reactContextHandler.setState({ listTemplates: templateResult.d.results });
        },
        error: function (jqXHR) {
          console.error("获取列表模板失败:", jqXHR);
        }
      });
    },
    error: function (jqXHR) {
      console.error("获取站点列表失败:", jqXHR);
    }
  });
}

方法二：并行AJAX调用（同时发起，提高效率） #

如果两个请求没有依赖关系，推荐用Promise包装后并行执行，减少等待时间：

public componentDidMount() {
  const reactContextHandler = this;
  // 包装AJAX请求为Promise
  const getSiteLists = () => {
    return new Promise((resolve, reject) => {
      jQuery.ajax({
        url: `${GetSpLists.siteurl}/_api/web/lists?$select=Title&$filter=Hidden eq false`,
        type: "GET",
        headers: { 'Accept': 'application/json;odata=verbose;' },
        success: resolve,
        error: reject
      });
    });
  };

  const getListTemplates = () => {
    return new Promise((resolve, reject) => {
      jQuery.ajax({
        url: `${GetSpLists.siteurl}/_api/web/ListTemplates/`,
        type: "GET",
        headers: { 'Accept': 'application/json;odata=verbose;' },
        success: resolve,
        error: reject
      });
    });
  };

  // 并行执行两个请求
  Promise.all([getSiteLists(), getListTemplates()])
    .then(([listResult, templateResult]) => {
      reactContextHandler.setState({
        sitecontents: listResult.d.results,
        listTemplates: templateResult.d.results
      });
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
}

方法三：使用SPFx官方推荐的SPHttpClient（更规范） #

SPFx自带的SPHttpClient是官方推荐的HTTP请求工具，无需依赖jQuery，更符合框架规范：

首先确保在WebPart类中注入spHttpClient服务：

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

export default class YourWebPart extends BaseClientSideWebPart<IYourWebPartProps> {
  // ... 其他代码

  public componentDidMount(): void {
    const siteUrl = this.context.pageContext.web.absoluteUrl;
    
    // 请求1：获取非隐藏列表
    const listRequest = this.context.spHttpClient.get(
      `${siteUrl}/_api/web/lists?$select=Title&$filter=Hidden eq false`,
      SPHttpClient.configurations.v1,
      { headers: { 'Accept': 'application/json;odata=nometadata' } }
    );

    // 请求2：获取列表模板
    const templateRequest = this.context.spHttpClient.get(
      `${siteUrl}/_api/web/ListTemplates/`,
      SPHttpClient.configurations.v1,
      { headers: { 'Accept': 'application/json;odata=nometadata' } }
    );

    // 并行处理两个请求
    Promise.all([listRequest, templateRequest])
      .then(async ([listResp, templateResp]) => {
        if (listResp.ok && templateResp.ok) {
          const listData = await listResp.json();
          const templateData = await templateResp.json();
          this.setState({
            sitecontents: listData.value,
            listTemplates: templateData.value
          });
        } else {
          console.error("请求返回异常");
        }
      })
      .catch(error => {
        console.error("请求失败:", error);
      });
  }
}

注意事项 #

• 记得在组件的状态接口中添加listTemplates字段，比如：

interface IYourComponentState {
  sitecontents: any[];
  listTemplates: any[];
}

内容的提问来源于stack exchange，提问作者kmurali krishna