[Перевод] Введение в ES6 (Часть 2)

внешний интерфейс сервер JavaScript Promise

Оригинал нажмите здесь

[Перевод] Введение в ES6 (Часть 1)

[Перевод] Начало работы с ES6 (часть 3)

Первая часть этой статьи размещена наздесь. Я представил несколько интересных функций :)

Темы, которые я затрону в этом посте, включают:

1. Обещания

2. Асинхронный / Ожидание

Promises

Обещания — полезная функция в ES6. Они используются для выполнения асинхронных операций, таких как запросы API, обработка файлов, загрузка изображений и т. д.

Итак, что такое асинхронность? (продолжайте, если вы уже знаете)

Асинхронные операции — это операции, выполнение которых занимает некоторое время.

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

Поэтому, если вы вызываете эту функцию и возвращаете результат значения (т.е.), возвращаемого переменной, оно будет неопределенным. Потому что JavaScript не знает, что функция обрабатывает какие-то асинхронные операции.

Итак, как нам с этим справиться?

Начнем с истории.

До промисов программисты определяли обратные вызовы. Обратный вызов — это обычная функция в Javascript, которая выполняется после завершения асинхронной операции.

Например, вы определяете функцию для выполнения запросов API к серверу. Затем вы настраиваете функцию обратного вызова, которая будет выполняться, когда мы получим ответ от сервера.

所以在上面的例子中，Javascript不会停止执行，直到我们从API获得响应。我们已经定义了一个函数（回调），它将在我们得到响应后执行。 Я думаю, вы понимаете.

Итак, что такое обещания?

Promise — это объект, который помогает выполнять асинхронные операции.

Технически это объекты, представляющие завершение асинхронной операции. (Если вы не понимаете, продолжайте читать некоторое время)

Прежде чем объяснять, как определять промисы, я объясню жизненный цикл промисов.

Промис имеет три состояния:

1. Приостановлено: в этом состоянии обещание просто выполняет асинхронную операцию. Например, он делает какие-то API-запросы к серверу или загружает какие-то изображения с cdn. Из этого состояния обещание может перейти либо в завершенное, либо в отклоненное состояние.

2. Завершено: если промис достиг этого состояния, это означает, что асинхронная операция завершена и результат вывода получен. Например, у нас есть ответ от API.

3. Отклонено: если обещание достигло этого состояния, это означает, что асинхронная операция не удалась, и мы получаем ошибку, которая привела к сбою операции.

хорошо .. давайте посмотрим код.

const apiCall = new Promise(function(resolve, reject) {
 // 异步操作在这里定义..
});

Промисы определяются путем создания конструктора с ключевым словом new. Тогда конструктор будет иметь функцию (назовем ее функцией выполнения).

Определяется в функции выполнения асинхронной операции.

Обратите внимание, что функция execute имеет два параметра: разрешить и отклонить.

Первый параметр resolve на самом деле является функцией. Он вызывается внутри функции execute, говорит, что асинхронная операция прошла успешно, и мы получаем результат. Функция разрешения помогает промисам перейти из состояния ожидания в состояние завершения. Надеюсь, ты понял. :)

像resolve一样，reject也是一个函数。它也在执行函数内部调用，它表示异步操作不成功，我们遇到了错误。 reject函数有助于Promise从挂起状态转为拒绝状态。 :)

const apiCall = new Promise(function(resolve, reject) {
 if ( API request to get some data ) {
  resolve("The request is successful and the response is "+ response);
 }
 else {
  reject("The request is not successful. The error is "+error);
 }
});

В приведенном выше коде вы можете видеть, что мы выполнили некоторые асинхронные операции в функции execute. Если мы получаем ответ от сервера, вызывается функция разрешения. В случае ошибки вызывается функция отклонения с сообщением об ошибке.

Мы выполнили Обещание. Давайте посмотрим, как выполнить промис и обработать вывод.

// 调用promise.
apiCall

Вот и все. закончился. :) :)

шутить. Это еще не конец.

В приведенном выше коде вызывается функция и выполняется обещание (т. е. функция выполняется). Затем вызовите функцию разрешения или отклонения на основе вывода.

Но, как видите, мы не обрабатываем вывод, возвращенный в промисе.

Например, если мы получаем ответ от API, мы должны его обработать. Или, если мы получим ошибку, нам нужно правильно ее обработать.

Итак, как нам с этим справиться?

Мы используем процессоры для получения вывода промисов.

Обработчик — это функция, которая выполняется, когда происходит какое-либо событие, например нажатие кнопки, перемещение курсора и т. д.

Поэтому, когда вызывается функция разрешения или функция отклонения, мы можем использовать обработчик для ее обработки.

Простой. :)

Давайте посмотрим на код

// 调用promise，并使用handlers.
apiCall.then(function(x) {console.log(x); })

В вышеуказанном коде мы будем прикреплены к обещанию процессора. Затем процессор имеет функциональный параметр. Сама параметры функций имеет параметр x.

Что случилось?

Когда функция разрешения вызывается внутри обещания, обработчик затем выполняет аргументы своей функции.

Я объясню снова.

Затем обработчик прослушивает события, когда вызывается функция разрешения. Следовательно, когда вызывается функция разрешения, процессор выполняет аргументы своей функции.

apiCall.then(function(x) {console.log(x); })
// 输出
The request is successful and the response is {name: "Jon Snow"}

Опять же, есть еще один обработчик catch.

Catch слушает функцию отклонения.

Функция catch выполняет аргументы своей функции при вызове функции reject.

apiCall.then(function(x) {console.log(x); }).catch(function(x) {console.log(x); })
// 假设这个请求没有成功 (在promise中reject函数被调用. )
输出:
The request is not successful

Я думаю, что вы получите идею.

Приведенный выше код не очень читаем. Итак, давайте попробуем реорганизовать его.

apiCall
.then(function(x) {
 console.log(x); 
})
.catch(function(x) {
 console.log(x);
})

А... теперь читабельно. Так пишет большинство программистов.

Хорошо.. так что я думаю, что вы прошли долгий путь.

Давайте рассмотрим.

1. Определите обещание, используя ключевое слово new с параметром функции. Тогда у самой функции есть два параметра: разрешить и отклонить.

2. Функция разрешения должна вызываться при успешном выполнении операции.

3. Функция отклонения должна вызываться при сбое операции.

4. Затем процессор контролирует функцию разрешения.

5. Защелка процессора контролирует функцию отбраковки.

6. Убедитесь, что код читаем :) :)

это работаетПример. Если вы не знакомы, пожалуйста, потренируйтесь.

var ApiCall = new Promise(function(resolve, reject) {
  
  var request = new XMLHttpRequest();
  request.open('GET', 'https://api.github.com/users/srebalaji');

  request.onload = function() {
    if (request.status == 200) {
      
      resolve(request.response);
    } else {
      reject(Error(request.statusText));
    }
  }

  request.send();
});

ApiCall
.then(function(x) {
  document.getElementById('response').innerHTML = x;
})
.catch(function(x) {
	document.getElementById('response').innerHTML = x;
})

Надеюсь, вы понимаете этот пример. Это прямо к делу.

Async / Await

Async/Await довольно прост, если вы знакомы с промисами. Если вы не понимаете Promises, Async/Await может помочь вам понять это. Возможно, вы также можете вообще избежать промисов. :)

Async

Ключевое слово Async заставляет функцию возвращать любые промисы.

Например, посмотрите на следующий код

async function hello() {
 return "Hello Promise..!"
}

Функция hello вернет обещание.

Код выше эквивалентен коду ниже.

function hello() {
 return new Promise(function(resolve, reject) {
 // executor function body
 });
}

Очень просто, правда?

Другой пример:

async function hello(a, b) {
 if (a < b) {
  return "Greater";
 }
 else {
  return new Error("Not Greater");
 }
}
hello(14, 10)
.then(function(x) {
 console.log("Good..! " + x); 
})
.catch(function(x) {
 console.log("Oops..! " + x); 
})
输出:
Oops..! Not Greater. 
// 如果你调用 hello(4, 10) 你会得到 "Good..! Greater"

В приведенном выше коде мы определяем асинхронную функцию и возвращаем какое-то значение или возвращаем некоторую ошибку.

Если вы хотите вернуть некоторые значения в асинхронной функции, это эквивалентно вызову функции разрешения.

Это эквивалентно функции отклонения, если она возвращает какую-либо ошибку, (т.е.) вызывая конструктор ошибок с помощью 'new'.

Не забывайте, что асинхронные функции возвращают обещание. Конечно, вы также можете вызывать функции разрешения и отклонения в асинхронных функциях.

Давайте посмотрим, как это работает.

async function Max(a, b) {
 if (a > b) {
  return Promise.resolve("Success");
 }
 else {
  return Promise.reject("Error");
 }
}
Max(4, 10)
.then(function(x) {
 console.log("Good " + x); 
})
.catch(function(x) {
 console.log("Oops " + x); 
});
输出:
Oops Error
// 如果调用 Max(14, 10) 我们会得到 "Good Success" :)

Await

Как следует из названия, это заставляет Javascript ждать завершения операции. Предположим, вы делаете запрос API, используя ключевое слово await. Это заставляет Javascript ждать, пока вы не получите ответ от конечной точки. Затем он возобновляет выполнение.

ладно..идем дальше

Await можно использовать только в асинхронных функциях. он не работает вне асинхронных функций

Давайте посмотрим на пример

async function hello() {
 let response = await fetch('https://api.github.com/');
 // 上面一行从给定的API终端获取响应
 return response;
}
hello()
.then(function(x) {
 console.log(x); 
});
...
...
输出:
Response from the API.

В приведенном выше коде вы можете видеть, что мы используем ожидание при получении ответа от API.

Получение ответа может занять несколько секунд, и пока ответ не будет получен, выполнение будет приостановлено и возобновлено позже.

Обратите внимание, что операция ожидания останавливает только выполнение внутри функции Hello. Остальная часть кода вне функции Hello не будет затронута. Исполнение продолжается вне функции. Когда мы получаем ответ, выполните параметр внутреннего функционала.

Надеюсь, ты понял.

давайте посмотрим на одинпримерБар

function getResponse() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve("Response from API. Executed after 5 secs");
    }, 5000);
  });
}

async function hello() {
  let response = await getResponse();
  return response;
}

hello()
  .then(function(x) {
    console.log(x);
  })
  .catch(function(x) {
    console.log(x);
  });
console.log("Im executed before getResponse()");

В приведенном выше примере вы можете видеть, что мы используем AWAIT для функции getResponse. И getResponse вернет вывод или ошибки через 5 секунд. Поэтому перед этим выполнение будет приостановлено, а затем возвращен ответ.

Давайте посмотрим в реальном временипример.

function getResponse(url) {
	return new Promise(function(success, failure) {
  var request = new XMLHttpRequest();
	request.open('GET', url);
	
  request.onload = function() {
    if (request.status == 200) {
      return success(request.response);
    } else {
      return failure("Error in processing..!" + request.status);
    }
  }
  request.onerror = function() {
    return failure("Error in processing ");
  }
  request.send();
  });
}

function getUsername(response) {
  response = JSON.parse(response);
  return response["login"];
}

function makeUsernameCaps(name) {
	return new Promise(function(success, failure) {
  	// Let's assume it takes 3secs to make the username caps :) 
  	setTimeout(function() {
    success(name.toUpperCase());
    }, 3000)
  });
}
async function apiCall(url) {
  let response = await getResponse(url); 
  let username = await getUsername(response);
  let username_in_caps = await makeUsernameCaps(username);
  return username_in_caps;
}

apiCall("https://api.github.com/users/srebalaji")
.then(function(x) {
	console.log(x);
})
.catch(function(x) {
	console.log("Error - "+x);
});

В приведенном выше примере вы можете видеть, что мы использовали несколько ожиданий. Поэтому для каждого ожидания программа прекращает выполнение до тех пор, пока не будет получен ответ, а затем возобновляется.

Попробуйте некоторые недопустимые URL-адреса в примере. Вы можете видеть, что выдается ошибка.

асинхронная функция Обработка ошибок очень проста. Если возникает ошибка в асинхронной функции или возникает ошибка для использования других функций ожидания в вызове асинхронной функции, вызывается функция отклонения. Простой.

Категории