Итак. Я сказал в комментариях, что вы можете использовать async / await, и дал ссылки. Теперь я попытаюсь научить вас, как работать с обещаниями и XMLHttpRequest.
Итак, первое. Я бы использовал свою собственную «библиотеку» (на самом деле это не библиотека, а всего лишь 3 новые команды) с именем PromiseReq, у которой есть XMLHttpsRequest, который возвращает Promises.
Вам понадобятся две функции от него:
sendToServer(config, data) и getServerFile(config). Они делают то, что подразумевают их имена. (sendToServer не так хорош в то время, но я улучшу это когда-нибудь позже). Они просто используют Обещания в качестве возврата. Они работают очень легко. Код @ Github
НО Он был разработан только для моего использования, поэтому он не очень гибкий (хотя я надеюсь, что когда-нибудь улучшу его).
Итак, нам нужно научиться использовать Обещания.
Во-первых, вам нужно знать, что такое Обещание и почему мы его используем.
Тогда вы можете создать такой как:
let pmq = new Promise((res,rej)=>{
// PROMISE BODY HERE
});
Здесь первое предупреждение. Обещания, сделанные таким образом, не поддерживают возвращение как способ решить Обещание! Вы должны использовать res()!
Некоторые функции просто возвращают их (например, fetch ()), и мы можем обработать их сразу после вызова функции.
Теперь pmq будет нашим обещанием.
Вы можете использовать pmq.then(callback) для обработки того, что произойдет, если где-то в теле обещания будет res() call и pmq.catch(callback) для обработки того, что происходит, когда вызывается rej(). Помните, что .catch(cb) и .then(cb) возвращают Обещание, так что вы можете безопасно соединить более одного .then() и в конце добавить .catch(), и он будет обрабатывать отклонение от каждого из .then() с.
Например:
pmq = fetch("file.txt");
pmq.then(e=>console.log(e.json())).then(console.log).catch(console.error);
Там есть большая заметка.
Порядок, в котором будут происходить эти события.
Если, например, rP() ждет 1с, чем журналы "A", то разрешается, этот код:
let a = rP();
a.then(_=>console.log("B")).catch(console.error);
console.log("C");
приведет к:
C
A
B
В связи с этим для этого требуется async / await .
Для этого необходимо выполнить асинхронную функцию с ключевым словом async.
let fn = async ()=>{}
Здесь вторая вещь. Асинхронные функции ВСЕГДА возвращают Promise. И это второй способ создать обещание. Вы просто не используете res(), rej() только return и throw.
Теперь мы можем позвонить внутрь fn():
let a = await rP().then(_=>console.log("B")).catch(console.error);
console.log("C");
и мы получим
A
B
C
Теперь. Как использовать его с XMLHttpRequest?
Вам нужно создать новый Promise с простым XMLHttpRequest внутри:
let xmlp = (type, path,data) => return new Promise((res,req)=>{
let xhr = new XMLHttpsRequest();
xhr.open(type, path, true); // true implies that is it asynchronous call
//...
xhr.send(data);
});
А теперь, когда решить?
XMLHttpRequest имеет полезные свойства и события . Лучшим для нашего случая является onreadystatechange.
Вы можете использовать его так:
xhr.onreadystatechange = _=>{
if(xhr.readyState === 4 && xhr.status === 200) // Everything went smoothly
res(xhr.responseText);
else if(shr.readyState === 4 && xhr.status !== 200) // Something went wrong!
rej(xhr.status);
}
А затем, чтобы получить данные, вы можете либо
Async/Await
// INSIDE ASYNC FUNCTION
let resData = await xmpl("GET", "path.txt", null).catch(console.error);
.then()
let resData;
xmpl("GET", "path.txt", null).then(r=>{
resData = r;
// REST OF WHOLE FUNCTION TO ENSURE THAT resData HAS BEEN SET
})
.catch(console.error);
Вы также можете отправить данные с помощью xmpl().
xmpl("POST", "observer.php", "Data to send to observer.php!")
.then(whatToDoAfterSendFN);
/*
to get such data in PHP you have to use
$post = file_get_contents('php://input');
*/
Я знаю, что этот ответ немного сумбурный, но я понятия не имел, как его написать: P Извините.