在JavaScript中按順序加載AJAX集合

Question

如何在JavaScript（jquery）中確保按順序依次執行某些操作。

說，我需要在加載teachers之前先加載schools集合，以便myTeacher.SchoolName = schools[myTeacher.SchoolId].name;

偽代碼如下：

const studentsUrl='api/students', teachersUrl='api/teachers', schoolsUrl='api/schools';
let students = null, teachers = null, schools = null;

$(document).ready(function () {
    getSchools(); 
    getTeachers(); 
    getStudents(); 
});

function getSchools() {
    $.get(schoolsUrl, function (data) {
            window.schools = data;
        });
}

function getTeachers() {
    $.get(teachersUrl, function (data) {
            window.teachers = data;

            // >>> SHOULD BE SURE, SCHOOLS already loaded!!!
            $.each(teachers, function (key, item) {
                item.school = schools[item.schoolId].name;
            });
        });
}

function getStudents() {
    $.get(studentsUrl, function (data) {
            window.students = data;

            // >>> SHOULD BE SURE, TEACEHRS already loaded!!!
            $.each(students, function (key, item) {
                item.teacher = teachers[item.teacherId].name;
            });
        });
}

PS。

還有另一種方法來確保順序，但在另一個函數的末尾封裝一個函數嗎？

Answer 1

由於您只需要所有可用的結果，並且每個請求都不依賴於先前的請求，因此可以使用jQuery.when

let students = null;
let teachers = null;
let schools = null;

$(document).ready(function() {
  $.when(
      getSchools(),
      getTeachers()
  ).done(function(shoolResults, teacherResults) {
      window.schools = shoolResults;
      window.teachers = teacherResults;
      handleTeachers();
      getStudents();
  });


  function getSchools() {
    return $.ajax({
      type: 'GET',
      url: schoolsUrl
    });
  }

  function getTeachers() {
    return $.ajax({
      type: 'GET',
      url: teachersUrl
    });
  }

  function handleTeachers() {
   $.each(teachers, function (key, item) { 
     item.school = schools[item.schoolId].name;
    });
  }
});

Answer 2

正如其他人已經建議的那樣，您可以鏈接請求。 我對您的代碼進行了一些更改。

1. 添加了嚴格模式 ，有助於防止錯誤
2. IFFE中包裝了該代碼，以防止全球污染

如果所有api都屬於同一服務器，則可以在服務器端處理所有這些數據並返回一個已填充的json。 這樣，您的服務器將在構造此json上做一些額外的工作，但另一方面，您將只發出一個ajax請求而不是3。這將更快地工作，並且可以將json緩存一段時間

第一個解決方案的代碼

(function () {

'use strict';
const studentsUrl = 'api/students';
const teachersUrl = 'api/teachers';
const schoolsUrl = 'api/schools';

let students = null;
let teachers = null;
let schools = null;

var scoolData = {
    schools: null,
    teachers: null,
    students: null
};

$(document).ready(function () {
    getSchools().then(function (schools) {
        scoolData.schools = schools;
        getTeachers().then(function (teachers) {
            scoolData.teachers = teachers;
            $.each(scoolData.teachers, function (key, item) {
                item.school = scoolData.schools[item.schoolId].name;
            });
        });
    });
});

function getSchools() {
    return $.get(schoolsUrl);
}

function getTeachers() {
    return $.get(teachersUrl,
        function (result) {
            scoolData.teachers = result;

            // >>> SHOULD BE SURE, SCHOOLS already loaded!!!
            $.each(teachers, function (key, item) {
                item.school = scoolData.schools[item.schoolId].name;
            });
        });
}
})();

Answer 3

如果您希望他們按順序排列（盡管我不確定我為什么會這樣，因為您無論如何都會檢索所有的學校/老師/學生），只需執行此操作即可。

注意 ：在以下示例中， get*函數是虛擬變量。 相反，只需返回來自它們的$.get調用的結果：

 function getSchools() { return Promise.resolve({1: {name: 'school1'}}); } function getTeachers() { return Promise.resolve({1: {name: 'teacher1', schoolId: 1}}); } function getStudents() { return Promise.resolve({1: {name: 'student1', teacherId: 1}}); } (async () => { const schools = await getSchools(); const teachers = await getTeachers(); const students = await getStudents(); // Alternative for the $.each code Object.values(teachers).forEach(teacher => teacher.school = schools[teacher.schoolId].name); Object.values(students).forEach(student => student.teacher = teachers[student.teacherId].name); console.log(schools, teachers, students); })(); 

另一個注意事項：這是ES8代碼，如果您需要支持較舊的瀏覽器並且不能使用像Babel這樣的編譯器，我將發布一個非異步/等待版本。

不依賴於ES8的代碼 ：

 function getSchools() { return Promise.resolve({1: {name: 'school1'}}); } function getTeachers() { return Promise.resolve({1: {name: 'teacher1', schoolId: 1}}); } function getStudents() { return Promise.resolve({1: {name: 'student1', teacherId: 1}}); } let schools = null, teachers = null, students = null; getSchools().then(_schools => { schools = _schools; return getTeachers(); }).then(_teachers => { teachers = _teachers; return getStudents(); }).then(_students => { students = _students; for (var _ in teachers) { teachers[_].school = schools[teachers[_].schoolId].name; } for (var _ in students) { students[_].teacher = teachers[students[_].teacherId].name } console.log(schools, teachers, students); }); 

Answer 4

調用getTeachers(); 當getSchools(); 返回成功或完成，成功是首選，因為如果有錯誤，則運行完整。

Answer 5

我認為您正在尋找這個。

 getSchools().done(function(data){
      var someId = data.findThatId;
      getTeachers(someId);
 }); 

您將需要從Ajax調用返回的數據獲得data中done 。

Answer 6

您可以異步加載它們，但必須等到兩個調用完成。

為此，請在ajax調用之前添加return並將結果合並到ready函數中（而不是在教師調用的成功處理程序中）：

let schoolsPromise = getSchools();
let teachersPromise = getTeachers();
$.when(schoolsPromise, teachersPromise)
  .then((schools, teachers) => {
    $.each(teachers, (key, item) => {
      item.school = schools[item.schoolId].name;
    });
  });