Question

这是定义多个ajax调用的第一个类从'config'导入{config};

function ajaxCall(url, isAsync = true) {
  return $.ajax({
      url: `${config.endpoint}${url}`,
      contentType: 'application/json; charset=UTF-8',
      async: isAsync
    });
}

export function getCleanData(id) {
 return ajaxCall(`cleaning?id=${id}`);
}

export function getDefinition(unit) {
  return ajaxCall(`definition/${unit}`);
}

 export function getContext(deviceType) {
  return ajaxCall(`viewcontext/${deviceType}`);  
}

这是第二类

import { getCleanData, getDefinition, getContext } from './request.js';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { cleanHistory: [], definition: '', clean: [], questionForm: '', flag: false, userName: '', errorMessage: null };
  }
  componentDidMount() {
    getefinition(unit)
        .fail((jqXHR, testStatus, errorThrown) => {
          if (jqXHR.status === 403) {
            this.setState({ errorMessage: 'No permission' });
          } else {
            this.setState({ errorMessage: 'Server issue' });
          }
        })
        .promise().then((data, textStatus, jqXHR) => {
          this.setState({ definition: data });
          getContext(deviceType)
              .promise().then(
                data => this.setState({ flag: data.Isflag, userName: data.UserName })
              );
        })
        .promise().then(() => getCleanData(id))
        .promise().then(data => { this.updateState(data); })
        .promise().then(getDefinition(unit)
                  .promise().then(data => { this.setState({ questionForm: data });
                }));
  }
  updateState(data) {
    if (!data || data.length === 0) {
      return;
    }
    let customer = {
      name: data[0].CustomerName,

      roomNumber: data[0].RoomNumber
    };
    this.setState({
      customer: customer,
      clean: data[0],
      cleanHistory: data
    });
  }

  render() {
    if (this.state.errorMessage) {
      return (<ErrorMessagePanel message={this.state.errorMessage} />);
    }
     if (this.state.definition === null && this.state.cleanHistory.length === 0) {//it went to here first
      return (<ErrorMessagePanel message="No data available." />);
    } 
    else    {
      return (
       <div id="cleanContent">
            <QuestionHistoryForm flag={this.state.flag} customer={this.state.customer} cleanHistory={this.state.cleanHistory} QuestionQuestionForm={this.state.definition} onFormSubmit={this.onFormSubmit} />
      </div> );
    }
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

尝试在渲染之前加载多个ajax调用，在渲染之前未加载cleanHistory为空，它首先转到this.state.cleanHistory.length为0，然后完全返回ajax调用。 getefinition是第一次调用，然后调用其余的ajax。

我尝试过ComponentDitMount无法使用它。我设置了ajax aysnc：true。还有其他什么问题吗？请帮忙！

Answer 1

我建议您使用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

在你的情况下，它将是这样的

getefinition(unit)
        .fail((jqXHR, testStatus, errorThrown) => {
          if (jqXHR.status === 403) {
            this.setState({ errorMessage: 'No permission' })
          } else {
            this.setState({ errorMessage: 'Server issue' })
          }
        })
        .promise().then((data, textStatus, jqXHR) => {
          const context = getContext(deviceType)
          const cleaning = getCleanData(id)
          const definition = getDefinition(unit)

          Promise.all([context, cleaning, definition]).then(values => {
              this.setState({
                  allDataFetched: true,
                  something: values.something
              })
          })
        })

render() {
    if (this.state.errorMessage) {
      return (<ErrorMessagePanel message={this.state.errorMessage} />);
    }
     if (this.state.definition === null && this.state.cleanHistory.length === 0) {//it went to here first
      return (<ErrorMessagePanel message="No data available." />);
    } else if(this.state.allDataFetched) {
      return (
       <div id="cleanContent">
            <QuestionHistoryForm flag={this.state.flag} customer={this.state.customer} cleanHistory={this.state.cleanHistory} QuestionQuestionForm={this.state.definition} onFormSubmit={this.onFormSubmit} />
      </div> );
    }
}

多个ajax调用应该在render之前加载

1 个答案: