Promise和事件轮询

Promise和事件轮询

1.Promise

• 要求：能够清楚的说出Promise的特性和静态方法

2.事件轮询

• 要求：能够理解清楚同步和异步在底层的实现机制

01-Promise

`作用`： 更加优雅的解决ajax请求响应顺序不可控的问题

`特性`：
	1. Promise是一个构造函数，需要通过new关键词实例化。实例化的过程中，需要接收一个函数参数，该函数又要接收两个函数参数，分别是resolve和reject
    let p = new Promise((resolve, reject) => {})
    
    2. Promise具有三种状态，默认的是`pennding进行中`，还有`fulfilled已完成`和`rejected已失败`
    
    3. 可以通过调用resolve方法将pennding进行中的状态修改为fulfilled已完成,同时会触发实例对象的then方法，顺便将参数带过去

	4. 可以通过调用reject方法将pennding进行中的状态修改为rejected已失败，同时会触发实例对象的catch方法，顺带将参数带过去
    
    5. 无论是已完成还是已失败，只要Promise的状态发生了改变，都会触发实例对象的finally方法
    
    
# Promise支持链式调用
// 注意： 为什么Promise支持链式调用？ 原型对象上then,catch和finally方法会返回一个新的Promise的实例对象

# Promise解决ajax请求的响应顺序不可控的原理：
'Promise的实例对象的then方法必须要等到Promise的resolve方法执行后才可以触发。'
`步骤`：
1. 我们可以在前一个Pomise里面发起ajax请求，
2. 请求完成后，再把请求的结果resolve出去，
3. 在实例对象的then方法中接收并发起新的请求

# Promise的静态方法
// all， any和race的区别
// all: 同时执行多个Promise,等到最后一个Promise成功执行后，才结束; 如果其中有一个Promise执行失败,就直接结束
// any: 同时执行多个Promise,只要有一个成功执行，就结束，如果都失败了，才结束, 并且报错
// race: 竞赛。无论成功还是失败，只要有一个结束了，就结束

// allSettled(es2020): 无论成功或失败，直到最后一个执行结束才结束

// resolve: 强制将Promise的状态修改为已完成

// reject: 强制将Promise的状态修改为已失败

02-async和await

`es7的语法。 最优雅的解决ajax请求响应顺序不可控`

`语法`：
// async: 写在函数前面，表示函数里面有异步任务
// await: 写在Promise的前面，等待一个Promise的好的结果 resolve的结果
async 函数名() {
    await 一个Promise
}


// 注意：await必须要等到resolve的结果才可以继续后面的代码
// 原理：将异步代码变成同步执行
async function fun() {
    let r1 = await new Promise((resolve, reject) => {
        axios.post('http://115.159.153.85:8001/postTest', {
            name: '小飞飞'
        }).then(res => {
            console.log('请求1', res);
            resolve(res.data.msg.slice(0, 3))
        })
    })
    console.log(222);
    // console.log(r1, '111111111111');
}

fun();

03-axios的其他语法。（推荐上一种）

axios({
    method: '请求方式',
    url: '请求地址',
    params|data: {
    	属性名：值
    	属性名：值
	}
}).then(res => {}).catch(err => {})

04-事件轮询

`作用`：探讨同步任务和异步任务在浏览器中的执行机制

`单线程`：js是一个单线程的语言，代码从上往下逐行执行，可能会造成代码阻塞
`执行栈`：调用栈，用来存储代码执行环境。代码执行环境可以执行代码。 '先入后出'
`任务队列`：异步任务会被依次放入任务队列中，分为宏任务和微任务。'先进先出'
	=> 宏任务：整个js代码，周期定时器，延时定时器
	=> 微任务：Promise的原型对象的then方法
`web API`: 接收并分配异步任务。也会消耗定时器的时间

`事件轮询`：
	=> 当打开了浏览器后，事件轮询就开始启动了
	=> 先执行一个宏任务，然后再清空整个微任务队列（将所有微任务执行完毕）
	=> 循环往复，直到执行完所有的代码。