Я вызываю следующие две функции:
getStudentDataFunction(){
........
return studentData
}
getTeachersDataFunction(){
........
return teachersData
}
Я хочу, чтобы функция getTeachersDataFunction() выполнялась после getStudentDataFunction() завершает возврат данных.
Есть ли способ сделать это?
Возможно, вам придется сделать эти два метода наблюдаемыми с помощью Rxjs, поэтому вы можете сделать что-то вроде этого:
caller() {
this.method1()
.pipe(switchMap(res1 => this.method2(res1)))
.subscribe(res2 => {
console.info(res2);
});
}
Также смотрите демо: https://stackblitz.com/edit/angular-ivy-rn5kfe?file=src/app/app.component.ts
Если функции синхронные, вы можете просто вызывать их последовательно, потому что они выполняются одна за другой:
getStudentDataFunction()
getTeachersDataFunction()
Однако предположительно функции асинхронны, иначе вы бы не задавали вопрос. Это означает, что один оператор в этой функции должен запустить процесс получения данных, но они получены через другой программный путь.
Одним из примеров этого может быть XMLHttpRequest , стандартный способ создания HTTP-запроса в браузере (пример взят из документации Mozilla):
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();
Здесь oReq.send();
делает HTTP-запрос, запуская процесс запроса данных. Но на самом деле данные получаются с помощью функции обратного вызова reqListener
во второй строке. Когда данные готовы, эта функция вызывается отдельно с объектом контекста this
, который позволяет получить ответ HTTP. Таким образом, любой код, который будет выполняться в результате возврата HTTP-запроса, должен вызываться из reqListener
.
Чтобы ваши функции работали последовательно, вам нужно определить функцию обратного вызова или другой механизм, который getStudentDataFunction()
использует для получения своих данных, а затем использовать один из способов JavaScript для обработки асинхронного кода, чтобы упорядочить функции так, как вы хотите. Три основных способа — это обратные вызовы, промисы и асинхронные функции (от самых старых к самым современным). getStudentDataFunction()
должен сам использовать один из этих трех методов.
Они будут работать следующим образом:
// 1. If getStudentDataFunction() accepts a callback
var studentCallback = function(studentData) {
getTeachersDataFunction()
}
getStudentDataFunction(studentCallback)
// 2. If getStudentDataFunction() returns a Promise:
getStudentDataFunction()
.then(getTeachersDataFunction) // second function is only called when Promise resolves
// 3. If getStudentDataFunction() returns a Promise and you wish to use async functions:
async function getAllData() {
await getStudentDataFunction() // await keyword makes execution wait for Promise to resolve
getTeachersDataFunction()
}
getAllData()
Вы можете обратиться к этой похожей проблеме: Angular / TypeScript — вызов функции после завершения другой