Javascript知识零散学习（面试篇）

亦凉 2024-04-06 13:45 63阅读 0赞

#### Promise ####

首先来说一下应该明白Promise是做什么的，JS是一门典型的异步单线程的编程语言，单线程就不说了，异步如何理解呢？异步编程可以理解成在执行指令之后不能马上得到结果，而是继续执行后面的指令，等到特定的事件触发之后才得到想要的结果。  
也可以和同步对比理解，同步就是一步步执行指令，而异步在遇到特殊任务（异步任务）时，并不会等待该任务执行完成之后再去执行下一步，而是跳过等待，先去执行下一步任务，等到某个时机该特殊任务（异步任务）执行完成之后再返回来对其进行处理。  
比如：

console.log(1);
    setTimeout(()=>{
      console.log(2)
    },1000)
    console.log(3);

该段代码不会按照顺序输出1，2，3而是先输出1，3之后再输出2。你可能会说，最后输出2是因为它是延时1s之后才输出的。那么请看以下代码：

console.log(1);
    setTimeout(()=>{
      console.log(2)
    },0)
    console.log(3);

以上代码输出顺序依旧是1，3，2。实际上并不是因为延时导致的2最后输出而是因为这就是一个典型的异步任务，它是在同步任务之后才去执行的。

说起异步肯定首先会想到`ajax`,因为ajax天生就是异步操作，先看ajax伪代码

var xhr = new XMLHttpRequest();
    xhr.open(method,url);
    xhr.send();
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        document.getElementById('app').innerHTML = xhr.responseText
      }
    }

由于`ajax`是异步操作，所以我们只能将从服务器获取数据之后再渲染页面的整个过程放在`ajax`请求成功之后监听函数`onreadystatechange`里,这样做有些糟糕，会导致代码比较乱。

因此有一种操作对于异步编程来说比较优雅就是***回调函数***。

还拿ajax举例：

//简易封装ajax
    function getAppJson(cb){
      var xhr = new XMLHttpRequest();
      xhr.open(method,url);
      xhr.send();
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
          cb(responseText)
        }
      }
    }
    //回调函数
    function initHtml(val){
      document.getElementById('app').innerHTML = val
    }
    // 将initHtml函数作为参数传入getAppJson中并在xhr.onreadystatechange 方法中执行并把后台所得数据作为参数传递给initHtml；
    getAppJson(initHtml);

上述代码使用回调函数优雅的解决了ajax异步操作。

上述代码简化之后就是下面这个样子的：

function app(cb){
        cb(1)
    }
    function init(val){
        console.log(val) //1
    }
    app(init)

回调函数是一种很好地异步编程思想。但是有一种被人们称为***回调地狱***的情况让人们不得不使用`Promise`去替代回调函数。

回调地狱就是回调函数里嵌套回调函数，比如：

比如当第一个`ajax`获取到的id需要作为第二个ajax的请求参数使用这样也会形成回调地狱。

为了解决回调地狱的恐怖，因此呢，Promise便横空出世。  
Promise 是异步编程的一种解决方案，比传统的回调函数更合理，更强大。在ES6中被标准化。  
Promise的好处就是`链式调用（chaining）`

#### Promise的使用 ####

1.  Promise的状态  
    Promise的状态表示此时异步执行的状态。Promise一共有三种状态：

*  pending:初始状态
 *  fulfilled:操作成功状态
 *  rejected:操作失败状态

特点：  
Promise三个状态不受外界影响，一旦状态改变，就不会再发生变化，Promise对象的状态改变只有两种可能，从pening变为fulfilled和从pending变为rejected.

1.  基本用法  
    ES6规定，Promise对象是一个构造函数，用来生成Promise实例。

let promise = new Promise((resolve,reject)=>{
      //...异步代码
      if(/* 异步成功 */){
         resolve(value)
      }else{
        reject(error)
      }
    })

Promise构造函数接收一个函数作为参数，该函数有两个参数分别为`resolve`和`reject`。它们是两个函数，由JavaScript引擎提供，不用自己部署。  
其中 `resolve`的作用是将Promise对象的状态从“未完成”变为“成功”（即从pending变为resolved）,在异步操作成功时调用，并将异步操作的结果作为参数传递出去。

`reject`函数的作用是将Promise对象的状态从“未完成”变为“失败”（即从pending变为rejected），在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。

var flag  = false;
    var p = new Promise((resolve,reject)=>{
        if(flag){
            resolve(1)
        }else{
            reject(2)
        }
    })
    
    p.then((val)=>{
        console.log(val,'then')
    }).catch((val)=>{
        console.log(val,'catch') //2 "catch"
    })

上述代码以flag模拟异步结果成功或失败，当成功时（flag为true），调用resolve并将结果1作为参数传递出去，Promise的实例化p调用Promise原型上的方法then。  
then方法包含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法，默认一般都只写一个参数。  
当执行resolve时可以在then的函数参数中接收从resolve中传递过来的参数  
当执行reject时可以在catch的函数参数中接收从reject中传递的参数。

由于`Promise.prototype.then(onFulfilled, onRejected)`和`Promise.prototype.catch(onRejected)`都会返回一个新的Promise对象，所以可以实现链式调用。

比如：用Promise实现两个数相加，再拿两个相加的数的结果减去一个数

function Add(a,b){
        return new Promise((resolve,reject)=>{
            resolve(a+b)
        })
    }
    
    function Min(c){
        return new Promise((resolve,reject)=>{
            resolve(c-1)
        })
    }
    
    Add(1,2).then((val)=>{
        return Min(val)
    })
    .then((val)=>{
        console.log(val)
    })

以上可以很直观的看出Promise的链式调用。

Promise原型上还有一个常用方法叫`finally`.