Promise 入门

promise入门笔记

前言

JS是一个单线程语言，它的异步机制主要有以下三大类：

• 定时器：setTimeout、setInterval
• 接口调用：Ajax、Promise、Fetch、Axios
• 事件函数（onClick）

在实际项目中，我们常常会遇到多次异步调用的情况，但多次异步调用的顺序会有问题

• 多次调用的结果，顺序可能不同步
• 异步调用的结果，如果存在依赖，则需要用回调函数进行嵌套，由此容易出现“回调地狱”的问题。

为什么需要Promise

回调地狱

简单说明就是：3个请求（异步），请求3依赖于请求2的返回结果，请求2依赖于请求1的返回结果，这样就涉及到了多层嵌套调用，也就是回调地狱。很难进行后续维护和二级开发

因此， ES6 提出了Promise来解决这个问题。

传统做法

在没有 Promise 之前，如果我们希望在异步结束之后再执行某一个操作就要使用定时器来处理

举例代码

var test = function (callback) {
	setTimeout( funciton() {
		callback()
	}, 1000 );
}
test(function () {
    console.log('qian duan');
});

同样的，如果后续还有内容需要在异步函数结束时输出，就需要多个异步函数进⾏嵌套，⾮常不利于后续的维护，而且会导致回调地狱的问题：

var test = function () {
	setTimeout( function (){
		console.log('qian duan1')
		setTimeout(function (){
			console.log('qian duan2')
			}, 2000)
		}, 1000)
}

使用 Promise

使用 Promise 就能优雅地解决这个问题

基本用法

1. new Promise 进行实例化，实例化时传入一个函数，这个函数接收两个参数：reslove （表示异步执行成功后的回调函数，已完成） 与 reject（表示异步执行失败后的回调函数，已拒绝）
2. 通过 Promise.then() 处理成功的返回结果，使用 .catch() 捕获错误，也就是接收rejec传过来的参数

举个例子

// 第一步：model层的接口封装
var test = function (){
	return new Promise (( reslove, reject){
		// 这里做异步任务（比如 ajax 请求接口。这里暂时用定时器代替）
        setTimeout(() => {
            var data = { retCode: 0, msg: 'qianguyihao' }; // 接口返回的数据，返回码 retCode 是动态数据
            if (data.retCode == 0) {
                // 接口请求成功时调用
                resolve(data);
            } else {
                // 接口请求失败时调用
                reject({ retCode: -1, msg: 'network error' });
            }
        }, 100);	
	})
}

// 第二步：业务层的接口调用。这里的 data 就是 从 resolve 和 reject 传过来的，也就是从接口拿到的数据
promiseA()
    .then((data) => {
        // 从 resolve 获取正常结果
        console.log(data);
    })
    .catch((e) => {
        // 从 reject 获取异常结果
        console.log(e);
    });

上面就是使用 Promise 来解决回调地狱的例子

Promise 详解

Promise 对象有三种状态

• pending 初始化
• fulfilled 成功
• rejected 拒绝

Promise 对象的API

.then()

then() 响应的是 Promise 调用成功后的结果，参数是一个函数

.catch()

.catch() 响应的是 Promise 调用异常后的结果，参数同样也是一个函数（通常要用箭头函数传入e，如上例所示），需要注意的是：

try,catch 捕获的是同步的异常，不能捕获异步的异常，也就是说，对 Promise 使用 try catch 是不能捕获异常的

ps.个人愚见：当 then() 被传入两个函数的时候（第一个函数参数代表成功后所调用的，第二个代表异常后所调用的，前者接 Promise 里的 reslove 返回值，后者接 reject 返回值）也就没 catch 什么事了

.finaly()

.finaly() 响应的是，无论 Promise 返回的是 reslove 还是 reject ，都会执行里面的函数参数，都能接收 reslove 和 reject 的返回值

.all( [ ] )
““”““”“”””
举个栗子
.all ( [ promise1 , promise2 , promise3 ] )

这个在面试里被问到的是 Promise的两种模式是什么，他们有什么区别 其实这也是 Promise 的一个 API ，含义是所有任务都执行成功才返回结果

.race( [ ] )

与上一个 .all() 一起被问到，它的含义是，其中一个任务成功就能有结果。

参考链接