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(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

.then 返回的是promises

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000);

}).then(function(result) {

  alert(result); // 1

  return new Promise((resolve, reject) => { // (*)
    setTimeout(() => resolve(result * 2), 1000);
  });

}).then(function(result) { // (**)

  alert(result); // 2

  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(result * 2), 1000);
  });

}).then(function(result) {

  alert(result); // 4

});

这里第一个 .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);
    }, 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);

　　

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(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).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(1), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).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 函数中才有效。

　　

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

  img.remove();

  return githubUser;
}

showAvatar();

　　在类方法中的使用

　　class Waiter{

　　　　async wait(){

　　　　　　retrun await Promise.resolve(1);

　　　　}

　　}

　　new Waiter()

　　　　.wait()

　　　　.then(alert);//1