js重点之promise

promise
是什么?作用?解决什么问题?

promise是一个用于异步操作的对象。

使代码可读性更好,提高性能,提高开发效率。

promise解决了回调地狱的问题,回调地狱是指在异步ajax请求中不断嵌套使用。

用法语法?
基本语法:new Promise ((resolve,reject)=>{//resolve("成功")//reject("失败")}).then((resolve)=>{},(reject)=>{}})
三种状态:fulfilled成功,rejected失败,pending进行中,状态一旦改变无法修改

方法:
Promise.catch用于处理rejected拒绝或者抛出异常的情况,与.then(null/undefined,。。。)相同
Promise.all方法接受一个数组作为参数,使得数组中所有promise实例均为成功状态时回调完成,若有一个失败,则此实例回调失败。
Promise.race方法接受一个数组作为参数,使得数组中只要有一个promise实例为成功或失败状态时,返回的 promise就会成功或失败,取决于第一个完成的实例是哪种状态。
Promise.finally(),finally方法用于指定不管Promise对象最后状态如何,都会执行的操作

 

什么是js事件循环?宏队列?微队列?实际应用?

事件循环的步骤:
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。

先输出同步执行的代码,在看异步代码,异步分为宏队列和微队列,先输出微队列,在输出宏队列,宏队列包括计时器,setTimeout,setInterval,setImmediate等,微队列有promise,MutationObserver等
1.

//1 2 4 3
const promise = new Promise((resolve, reject) => {
console.log(1);
resolve();
console.log(2);
})
promise.then(() => {
console.log(3);
})
console.log(4);

 

2.

//then:success1
const promise = new Promise((resolve, reject) => {
resolve(‘success1‘);
reject(‘error‘);
resolve(‘success2‘);
});
promise.then((res) => {
console.log(‘then:‘, res);
}).catch((err) => {
console.log(‘catch:‘, err);
})

 

3.

//golb1 glob1_promise glob2_promise glob1_nextTick glob2_nextTick glob1_then glob2_then timeout1 timeout1_promise timeout2 timeout2_promise timeout1_nextTick
//timeout2_nextTick timeout1_then timeout2_then immediate1 immediate1_promise immediate2 immediate2_promise immediate1_nextTick immediate2_nextTick immediate1_then immediate2_then
console.log(‘golb1‘);

setTimeout(function() {
console.log(‘timeout1‘);
process.nextTick(function() {
console.log(‘timeout1_nextTick‘);
});
new Promise(function(resolve) {
console.log(‘timeout1_promise‘);
resolve();
}).then(function() {
console.log(‘timeout1_then‘)
})
});

setImmediate(function() {
console.log(‘immediate1‘);
process.nextTick(function() {
console.log(‘immediate1_nextTick‘);
});
new Promise(function(resolve) {
console.log(‘immediate1_promise‘);
resolve();
}).then(function() {
console.log(‘immediate1_then‘)
})
});

process.nextTick(function() {
console.log(‘glob1_nextTick‘);
});
new Promise(function(resolve) {
console.log(‘glob1_promise‘);
resolve();
}).then(function() {
console.log(‘glob1_then‘)
});

setTimeout(function() {
console.log(‘timeout2‘);
process.nextTick(function() {
console.log(‘timeout2_nextTick‘);
});
new Promise(function(resolve) {
console.log(‘timeout2_promise‘);
resolve();
}).then(function() {
console.log(‘timeout2_then‘)
})
});

process.nextTick(function() {
console.log(‘glob2_nextTick‘);
});
new Promise(function(resolve) {
console.log(‘glob2_promise‘);
resolve();
}).then(function() {
console.log(‘glob2_then‘)
});

setImmediate(function() {
console.log(‘immediate2‘);
process.nextTick(function() {
console.log(‘immediate2_nextTick‘);
});
new Promise(function(resolve) {
console.log(‘immediate2_promise‘);
resolve();
}).then(function() {
console.log(‘immediate2_then‘)
})
});

 

4.

console.log(‘111‘); 
new Promise(function(resolve) {
console.log(‘222‘);
resolve();
}).then(function() {
console.log(‘444‘)
}).then(function() {
console.log(‘666‘)
new Promise(function(resolve) {
console.log(‘777‘);
resolve();
}).then(function() {
console.log(‘888‘)
}).then(function() {
console.log(‘10000‘)
})

}).then(function() {
console.log(‘999‘)
})

new Promise(function(resolve) {
console.log(‘333‘);
resolve();
}).then(function() {
console.log(‘555‘)
});

 

 

Async/Await:Promise的另一种方式,使异步代码,更像同步的代码
一个函数如果加上async ,那么该函数就会返回一个Promise,await 只能配套 async 使用。把await和成功后的操作放到try里,失败的放在catch
为什么Async/Await更好?简洁,节省代码,减少冗余

async function fn(){
console.log(‘a‘)
}
fn()
console.log(‘b‘)
//a
//b

function fn(){
return new Promise(resolve=>{
console.log(1)
resolve()
})
}
async function f1(){
await fn()
console.log(2)
}
f1()
console.log(3)
//1
//3
//2

function fn(){
return new Promise(resolve=>{
console.log(1)
})
}
async function f1(){
await fn()
console.log(2)
}
f1()
console.log(3)
//1
//3

 

js重点之promise

上一篇:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解


下一篇:PHP基础:运算符,流程控制,循环