ES6----Promise

2020.12.9 03：39

异步和同步

• 异步，操作之间没有关系，同时执行多个操作， 代码复杂
• 同步，同时只能做一件事，代码简单

Promise 对象

• 用同步的方式来书写异步代码
• Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数
• 改善了可读性，对于多层嵌套的回调函数很方便
• 充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口

Promise 也是一个构造函数

• 接受一个回调函数作为参数，回调函数里面是异步操作的代码
• 返回的p就是一个 Promise 实例对象
• 所有异步任务都返回一个 Promise 实例对象
• Promise 实例对象有一个then方法，用来指定下一步的回调函数

function add(resolve, reject) {
  // 异步代码...
}
var p = new Promise(add);
p.then(()=>{//异步操作执行完成，就会执行then的回调函数
	//异步请求成功操作
},()=>{
	//异步请求失败操作
});

Promise 使得异步流程可以写成同步流程

// 传统写法
step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // ...
      });
    });
  });
});

// Promise 的写法
(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);

Promise怎么用

通过Promise请求数据

let p=new Promise((resolve,reject)=>{
	$.ajax({//jq的$.ajax()
		url:'data/arr.txt',//本地文件
		dataType:'json',
		success(data){
			resolve(data);
		},
		error(error){
			reject(err);
		}
	});
});
p.then(data=>{//请求成功执行,实际上就是resolve
	console.log(`请求成功`);
	console.log(data);
},
	()=>console.log(`请求失败`)//请求失败执行,实际上就是reject
);

Promise.all([])方法

• 接受一个数组作为参数
• 将多个Promise对象实例包装，生成并返回一个新的Promise实例
• promise数组中所有的promise实例都变为resolve的时候，该方法才会返回
  并将所有结果传递results数组中
• promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

Promise.race([])方法

• 接受一个数组作为参数
• Promse.race就是赛跑的意思
• 哪个结果获得的快，就返回那个结果
• 不管结果本身是成功状态还是失败状态

链式操作

Promise.all([
	$.ajax({url:'https://api.imjad.cn/cloudmusic/?type=detail&id=478963730',dataType:'json'}),
	$.ajax({url:'https://api.imjad.cn/cloudmusic/?type=detail&id=28012031',dataType:'json'})
]).then(data=>data).then(data=>{//连续调用两次then方法
	console.log(data);
	return data;
}).then(data=>{//进行判断
	let name=data[0].songs[0].name;
	console.log(name);
	return name=='狂徒'?'第一首歌是狂徒':'第一首歌是其他歌曲';
}).then(data=>console.log(data));

通过then方法处理带逻辑性的事情，例如通过return将数据返回，再调用then方法进行逻辑判断，再根据判断的结果决定执行哪些事

部分内容转载自:参考