javaScript 基础知识汇总 （十四）

1、回调

　　什么是回调？

　　个人理解，让函数有序的执行。

　　示例：

　　function loadScript(src,callback){

　　　　let script = document.createElement('script');

　　　　script.src = src;

　　　　script.onload =()=>calllback(script);

　　　　document.head.append(script);

　　}

　　loadScript('src',script=>{

　　　　alert('ok');

　　});

　　也可以在回调函数中继续回调，但是这样会导致回调金字塔，或者地狱。

2、Promise

　　Promise 对象的构造语法

　　let promise = new Promise(function(resolve,reject){

　　　　//executror

　　});

　　promise 对象有内部属性

　　state -----最初是 pending，然后被改为‘fulfilled“ 或”rejected“

　　result -----一个任意值，最初是undefined

　　当executor 完成任务时，应用调用下列之一

　　消费者：”.then“ 和”.catch"

　　promise 对象充当生产者，和消费函数之间的连接。

　　.then 的语法;

　　promise.then(

　　　　function(result){}

　　　　function(error){}

　　);

　　示例：

　　let promise = new Promise(function(resolve,reject){

　　　　setTimeout(()=>resolve("done"),1000);

　　});

　　promise.then(

　　　　result=>alert(result),

　　　　error=>alert(error)

　　);

　　　　其中成功和失败也可以只选其一，操作如下

　　只对成功的进行操作;

　　let promise = new Promise(resolve=>resolve("done!"));

　　promise.then(alert);

　　对错误有两种操作

　　let promise = new Promise((resolve,reject)=>{

　　　　setTimeout(()=>reject(new Error("cuole!")),1000);

　　});

　　promise.then(null,alert);

　　简写:promise.catch(alert);

　　实践

　　function loadScript(src){

　　　　return new Promise(function(resolve,reject){

　　　　　　let script  document.createElement('script');

　　　　　　script.src = src;

　　　　　　script.onload=()=>resolve(script);

　　　　　　script.onerror=()=>reject(new Error("Script load error: " + src));

　　　　　　document.head.append(script);

　　　　});

　　}

　　let promise = loadScript('src');

　　promise.then(

　　　　script=>alert(`${script.src} is loaded!`),

　　　　error=>alert(`Error:${error.message}`)

　　);

　　promise.then(script=>alert('one more handler to do something');

3、Promises 链

　　示例：

 new Promise(function(resolve, reject) {
 
   setTimeout(() => resolve(), ); // (*)
 
 }).then(function(result) { // (**)
 
   alert(result); //
   return result * ;
 
 }).then(function(result) { // (***)
 
   alert(result); //
   return result * ;
 
 }).then(function(result) {
 
   alert(result); //
   return result * ;
 
 });

.then 返回的是promises

 new Promise(function(resolve, reject) {
 
   setTimeout(() => resolve(), );
 
 }).then(function(result) {
 
   alert(result); //
 
   return new Promise((resolve, reject) => { // (*)
     setTimeout(() => resolve(result * ), );
   });
 
 }).then(function(result) { // (**)
 
   alert(result); //
 
   return new Promise((resolve, reject) => {
     setTimeout(() => resolve(result * ), );
   });
 
 }).then(function(result) {
 
   alert(result); //
 
 });

这里第一个 .then 显示 1 并在 (*) 行返回 new Promise(…)，一秒之后它会 resolve 掉，然后 result（resolve 的参数，在这里它是 result*2）被传递给位于 (**) 行的第二个 .then。它会显示 2，而且执行相同的动作。

所以输出还是 1 → 2 → 4，但是现在每次 alert 调用之间会有 1 秒钟的延迟。

　示例 loadScript

 loadScript("/article/promise-chaining/one.js")
   .then(script => loadScript("/article/promise-chaining/two.js"))
   .then(script => loadScript("/article/promise-chaining/three.js"))
   .then(script => {
     // 脚本被加载，我们可以使用声明过的函数了
     one();
     two();
     three();
   });

　　示例 fetch

　　基本语法： let promise = fetch(url);

　　

function loadJson(url) {
  return fetch(url)
    .then(response => response.json());
}
 
function loadGithubUser(name) {
  return fetch(`https://api.github.com/users/${name}`)
    .then(response => response.json());
}
 
function showAvatar(githubUser) {
  return new Promise(function(resolve, reject) {
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);
 
    setTimeout(() => {
      img.remove();
      resolve(githubUser);
    }, );
  });
}
 
// 使用它们
loadJson('/article/promise-chaining/user.json')
  .then(user => loadGithubUser(user.name))
  .then(showAvatar)
  .then(githubUser => alert(`Finished showing ${githubUser.name}`));
  // ...

4、Promise API

　　在Promise 类中，有5种静态方法。如下

　　Promise.resolve

　　语法：let promise = Promise.resolve(value);

　　

 function loadCached(url) {
   let cache = loadCached.cache || (loadCached.cache = new Map());
 
   if (cache.has(url)) {
     return Promise.resolve(cache.get(url)); // (*)
   }
 
   return fetch(url)
     .then(response => response.text())
     .then(text => {
       cache.set(url,text);
       return text;
     });
 }

　　Promise.reject

　　语法： let promise = Promise.reject(error);

　　let promise = new Promise((resolve, reject) => reject(error));

　　Promise.all

　　let promise = Promise.all([...promises...]);

 Promise.all([
   new Promise(resolve => setTimeout(() => resolve(), )), //
   new Promise(resolve => setTimeout(() => resolve(), )), //
   new Promise(resolve => setTimeout(() => resolve(), ))  //
 ]).then(alert); // 1,2,3 当 promise 就绪：每一个 promise 即成为数组中的一员

　　Promise.allSettled

　　

 let urls = [
   'https://api.github.com/users/iliakan',
   'https://api.github.com/users/remy',
   'https://no-such-url'
 ];
 
 Promise.allSettled(urls.map(url => fetch(url)))
   .then(results => { // (*)
     results.forEach((result, num) => {
       if (result.status == "fulfilled") {
         alert(`${urls[num]}: ${result.value.status}`);
       }
       if (result.status == "rejected") {
         alert(`${urls[num]}: ${result.reason}`);
       }
     });
   });

　　Promise.race

　　语法：let promise = Promise.race(iterable);　

 Promise.race([
   new Promise((resolve, reject) => setTimeout(() => resolve(), )),
   new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), )),
   new Promise((resolve, reject) => setTimeout(() => resolve(), ))
 ]).then(alert); //

第一个结果/错误会成为整个 Promise.race 的结果。在第一个 promise 被解决（“赢得比赛[wins the race]”）后，所有后面的结果/错误都会被忽略。

5、Async/await

　　Async functions

　　async fucntion f(){

　　　　return 1;
　　}

　　f().then(alert);//1

　　async 确保函数返回值是一个promise。

　　Await

　　语法：let value = await promise；

　　要求：await 不能在普通方法中使用，必须在 async 函数中才有效。

　　

 async function showAvatar() {
 
   // 读取 JSON
   let response = await fetch('/article/promise-chaining/user.json');
   let user = await response.json();
 
   // 读取 github 用户信息
   let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
   let githubUser = await githubResponse.json();
 
   // 显示头像
   let img = document.createElement('img');
   img.src = githubUser.avatar_url;
   img.className = "promise-avatar-example";
   document.body.append(img);
 
   // 等待 3 秒
   await new Promise((resolve, reject) => setTimeout(resolve, ));
 
   img.remove();
 
   return githubUser;
 }
 
 showAvatar();

　　在类方法中的使用

　　class Waiter{

　　　　async wait(){

　　　　　　retrun await Promise.resolve(1);

　　　　}

　　}

　　new Waiter()

　　　　.wait()

　　　　.then(alert);//1