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 链

　　示例：

 1 new Promise(function(resolve, reject) {
 2 
 3   setTimeout(() => resolve(1), 1000); // (*)
 4 
 5 }).then(function(result) { // (**)
 6 
 7   alert(result); // 1
 8   return result * 2;
 9 
10 }).then(function(result) { // (***)
11 
12   alert(result); // 2
13   return result * 2;
14 
15 }).then(function(result) {
16 
17   alert(result); // 4
18   return result * 2;
19 
20 });

　　.then 返回的是promises

 1 new Promise(function(resolve, reject) {
 2 
 3   setTimeout(() => resolve(1), 1000);
 4 
 5 }).then(function(result) {
 6 
 7   alert(result); // 1
 8 
 9   return new Promise((resolve, reject) => { // (*)
10     setTimeout(() => resolve(result * 2), 1000);
11   });
12 
13 }).then(function(result) { // (**)
14 
15   alert(result); // 2
16 
17   return new Promise((resolve, reject) => {
18     setTimeout(() => resolve(result * 2), 1000);
19   });
20 
21 }).then(function(result) {
22 
23   alert(result); // 4
24 
25 });

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

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

　　示例 loadScript

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

　　示例 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);
    }, 3000);
  });
}

// 使用它们
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);

　　

 1 function loadCached(url) {
 2   let cache = loadCached.cache || (loadCached.cache = new Map());
 3 
 4   if (cache.has(url)) {
 5     return Promise.resolve(cache.get(url)); // (*)
 6   }
 7 
 8   return fetch(url)
 9     .then(response => response.text())
10     .then(text => {
11       cache.set(url,text);
12       return text;
13     });
14 }

　　Promise.reject

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

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

　　Promise.all

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

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

　　Promise.allSettled

　　

 1 let urls = [
 2   'https://api.github.com/users/iliakan',
 3   'https://api.github.com/users/remy',
 4   'https://no-such-url'
 5 ];
 6 
 7 Promise.allSettled(urls.map(url => fetch(url)))
 8   .then(results => { // (*)
 9     results.forEach((result, num) => {
10       if (result.status == "fulfilled") {
11         alert(`${urls[num]}: ${result.value.status}`);
12       }
13       if (result.status == "rejected") {
14         alert(`${urls[num]}: ${result.reason}`);
15       }
16     });
17   });

　　Promise.race

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

1 Promise.race([
2   new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
3   new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
4   new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
5 ]).then(alert); // 1

第一个结果/错误会成为整个 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 函数中才有效。

　　

 1 async function showAvatar() {
 2 
 3   // 读取 JSON
 4   let response = await fetch('/article/promise-chaining/user.json');
 5   let user = await response.json();
 6 
 7   // 读取 github 用户信息
 8   let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
 9   let githubUser = await githubResponse.json();
10 
11   // 显示头像
12   let img = document.createElement('img');
13   img.src = githubUser.avatar_url;
14   img.className = "promise-avatar-example";
15   document.body.append(img);
16 
17   // 等待 3 秒
18   await new Promise((resolve, reject) => setTimeout(resolve, 3000));
19 
20   img.remove();
21 
22   return githubUser;
23 }
24 
25 showAvatar();

　　在类方法中的使用

　　class Waiter{

　　　　async wait(){

　　　　　　retrun await Promise.resolve(1);

　　　　}

　　}

　　new Waiter()

　　　　.wait()

　　　　.then(alert);//1