常见前端面试题--Promise

Promise这篇文章让你一步到位，安排！！！

1. Promise介绍与基本使用
   （1）抽象表达：
   Promise是一门新的技术（ES6规范）；
   Promise是JS中进行异步编程（fs文件操作、数据库操作、定时器、AJAX）新解决方案；
   （旧方案是单纯使用回调函数）
   （2）具体表达：
   从语法上：Promise是一个构造函数
   从功能上：Promise对象用来封装异步 操作并可以获取其成功/失败的结果值
   （3）与回调函数相比，优势

• 指定回调函数的方式更加灵活
  旧的：必须在启动异步任务前指定
  promise: 启动异步任务 => 返会promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）
• 支持链式调用，可以解决回调地狱问题
  回调地狱：回调函数嵌套使用，外部回调函数异步执行的结果是嵌套的回调执行的条件，金字塔型。
  回调地狱缺点：不便于阅读、不便于异常处理

// 定时器 抽奖
setTimeout(() => {
  let n = Math.random() * 10 + 1;
  if (n <= 3) {
    alert('恭喜中奖了');
  }else {
    alert('再接再厉');
  }
}, 1000);

// 利用promise形式实现
// 两个状态只能二选一
// resolve 解决 函数类型的数据
// reject 拒绝 函数类型的数据
const p = new Promise((resolve, reject) => {
  // promise 可以包裹异步操作
  setTimeout(() => {
    let n = Math.random() * 10 + 1;
      if (n <= 3) {
        resolve(n); // 将promise的状态设置成 成功
      }else {
        reject(n); // 将promise的状态设置成 失败
      }
  }, 1000);
});

// 调用then方法
// 接受参数
p.then((value) => {
  // 成功时调用
  alert('恭喜中奖了' + '中奖值为' + value);
}, (reason) => {
  // 失败时调用
  alert('再接再厉' + reason);
});

util.promisify
错误优先的API。在fs模块当中的API（异步函数的API）大多是以err是第一个参数。这里返回一个promise的版本

// fs文件读取
// 封装
function mineReadFile(path) {
 return new Promise((resolve, reject) => {
   require('fs').readFile(path, (err, data) => {
     if(err) reject(err);
     resolve(data); 
   });
 });
}

mineReadFile('路径名').then(value => {
  console.log(value);
}, reason => {
  console.log(reason);
});

// 引入util.promisify方法
const util = require('util');
const fs = reequire('fs');
// 返回一个新的函数
let mineReadFile = util.promisify(fs.readFile);

// 用法有点类似前面p的写法
minReadFile('路径名').then(value => {
  console.log(value.toString());
});

让我们一起试着封装AJAX请求，用
promise

function sendAJAX(url) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url );
  xhr.send();
  // 处理结果
  xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
      if(xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      }else {
        reject(xhr.status);
      }
    }
  }
}

sendAJAX('接口url').then(value => {
  console.log(value);
}, reason => {
  console.warn(reason);
});

2. promise的状态改变
   promise实例对象的一个属性 [PromiseState]

• pending 未决定的/ 等待
• resolved / fullfilled 成功
• rejected 失败
  （1）pending变为resolved
  （2）pending变为rejected
  说明：只有这两种，且一个promise对象只能改变一次；无论变成成功还是失败，都会有一个结果数据；成功的结果数据一般为value，失败的结果数据一般为reason。
  只有这两个函数才能改变状态
• resolve
• reject

3. Promise的API
   Promise构造函数：Promise(excutor) {}
   (1)executor 函数：执行器 (resolve, reject) => {}
   (2)resolve 函数：内部定义成功时调用的函数 value => {}
   (3)reject 函数：内部定义失败时调用的函数 reason => {}
   说明：executor会在Promise内部立即同步调用，异步操作在执行器中执行
   Promise.prototype.then方法：(onResolved, onRejected) => {}
   (1)onResolved 函数：成功的回调函数 (value) => {}
   (2)onRejected 函数：失败的回调函数 (reason) => {}
   说明：指定用于得到成功value的成功回调和用于失败reason的失败回调，返回的是一个新的promise对象
   Promise.prototype.catch方法：(onRejected) => {}
   (1)onRejected 函数：失败的回调函数 (reason) => {}
   Promise resolve方法：(value) => {}
   (1)value: 成功的数据或Promise对像
   说明：返回一个成功/失败的promise对象，取决于传入参数，参数为promise，就由内部promise的结果决定；参数为非promise，则返回状态为成功，结果为参数
   Promise.reject方法：(reason) => {}
   (1)reason: 失败的原因
   说明：返回一个失败的promise对象
   Promise.all方法：(promise) => {]
   (1)promise：包含n个promise的数组
   说明：返回一个新的promise，只有所有的promise都成功才成功，，结果是所有promise成功的值组成的数组；只要有一个失败就直接失败，返回Error
   Promise.race方法：(promise) => {}
   (1)promise包含n个promise的数组
   说明：返回一个新的promise，第一个决定的promise的结果状态就是最终的结果状态