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 就能优雅地解决这个问题

基本用法

new Promise 进行实例化，实例化时传入一个函数，这个函数接收两个参数：reslove （表示异步执行成功后的回调函数，已完成）与 reject（表示异步执行失败后的回调函数，已拒绝）
通过 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);
    });