Как выполнить код после загрузки ajax?

Question

[tyoma_koder]

Этот код не работает, выводятся элементы которые были до ajax

async function click(){
await ajax.bind(this);
console.log(this.parentNode.parentNode.querySelectorAll(".style-products-wrapper .active-style-product"));
}

Так тоже не работает

function click(){
let p = new Promise(ajax.bind(this));
p.then(console.log(this.parentNode.parentNode.querySelectorAll(".style-products-wrapper .active-style-product")), console.log("ошибка"));
}

Comments

[Вадим]

А для чего, позвольте узнать, Вы делаете bind?

[tyoma_koder]

Вадим, я получаю id категории при клике по элементу в функции ajax

[Вадим]

tyoma_koder,

function click(){
  let p = new Promise(ajax.bind(this)); 
  p.then(console.log(this.parentNode.parentNode.querySelectorAll(".style-products-wrapper .active-style-product")), 
  console.log("ошибка"));
}

Единственный аргумент промиса - колбэк функция, которая принимает на вход 2 аргумента - функции resolve и reject.
Телом же функции должен быть код, который что-то делает и в зависимости от условия вызывает либо resolve, либо reject.

ajax.bind - возвращает новую функцию, с другим контекстом.
Таким образом, Вы подменили this на свой this.

Да, функция ajax у jQuqery тоже может принимать 2 аргумента, 1 из которых урл. Либо 1 аргумент - с объектом параметров запроса.

Таким образом, Вы промису указали в качестве callback функции, функцию ajax, с изменённым контекстом, которая ожидает на вход объект с настройками, а получает функцию resolve.
Соответственно - запрос не выполняется.

[tyoma_koder]

Вадим, как тогда выполнить код только после загрузки ajax.bind?

[Вадим]

tyoma_koder, ajax.bind не делает никакой загрузки, а лишь возвращает(но не вызывает) новую функцию.
Откуда Вы взяли этот код?

[Вадим]

tyoma_koder, https://professorweb.ru/my/javascript/jquery/level...

[tyoma_koder]

Вадим, то что bind просто задаёт this для функции это понятно, но как тогда сделать так чтобы код выполнялся после того как ajax всё загрузил и вывел? bind нужен т.к. из контекста я беру нужные данные для ajax, также функция ajax установлена в качестве события при клике для элементов поэтому

let ajax= function(src) {
  return new Promise((resolve, reject) => {...})
}

тоже не подходит

[Вадим]

tyoma_koder, Что не подходит? Вы в промисе в теле функции resolve или reject вызываете?

[Вадим]

tyoma_koder,
Вот пример с помощью нативного fetch, который промисифицирован.

[Вадим]

tyoma_koder, а вот тот же самое, только если представить что функция fetch не нативная, а просто выполняющая запрос и возвращающая промис.

[tyoma_koder]

Вадим, а без return и new Promise никак? Типа такого (этот код не работает)

function click(){
ajax(this).then(console.log(123));
}
async function getStyles(elem){}

[Вадим]

tyoma_koder, для этого функция ajax должна возвращать промис