vue-promise-axios

1 回调函数

1.1 回调函数定义：

① 函数是不是你定义的 你定义的

② 函数你要有没有调用 你没调用

③ 最终函数有没有被执行 最终执行了

1.2 回调函数分类：

同步的回调：数组api中的回调函数基本都是同步的；promise的执行器是同步的

异步的回调：定时器的回调 dom事件的回调 ajax请求的回调

遇到异步回调函数需注意以下两点：

① 回调什么时候进队列

② 回调什么时候被执行

内存结构：堆 栈 队列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2zfZO7rw-1626050796268)(D:\class\vue\02-vue\code\day07(axios)]\01_异步&单线程\定时器\事件循环模型.png)

//最快一秒钟同时输出5个5   
for (var i 0; i < 5; i++){
   
	setTimeout(function() {
   
		console.log(i)   55555
	},1000)
}
//...耗时的操作

2 变量的查找规则

• js中的作用域就是函数作用域!

• 变量的查找基于作用域链

变量的查找规则：

① 左查询(变量出现在等号的左边使用左查询的规则进行变量查找)

​ 如果整条作用域链中 都没有对应变量的声明 则v8会默认在顶层作用域声明一份

② 右查询(变量出现在等号的非左边使用右查询的规则进行变量查找)

​ 如果整条作用域链中 都没有对应变量的声明 则v8会报错

function wrap(){
   
        function inner(){
   
            a = 1;
            console.log(a,"inner")
        }
        inner()
    } 
 wrap()
 console.log(a,"全局")  //1 inner 1 全局

3 Promis实例

3.1 Promise最佳实践

① promise实例是一次性的，一个promise实例实例只能使用一次

② promise构造函数的执行器必须有异步代码，应该在异步对应的回调来合理的调用resolve reject

③ then方法中回调的返回值一般是一个新的promise

3.2 promise重点

① promise的实例对象三种状态是如何切换的 （成功 失败 初始化）

② promise的实例持有值为多少

当通过new Promise创造出来的promise实例; 他状态的改变以及持有的值 都跟执行器有关，new Promise时 执行器先执行 再返回promise实例。

执行器的返回值会被忽略

• 如果执行器中什么都没有发生，创建出来的promise实例则是初始化状态，持有值是undefined
• 如果执行器中resolve被调用，创建出来的实例是成功状态，持有的值是resolve函数第一个参数
• 如果执行器中reject被调用，创建出来的实例是失败状态，持有的值是reject函数第一个参数
• 如果执行器中发生异常，创建出来的promise实例是失败状态，持有的值是失败原因

    let promsie = new Promise((resolve, reject)=>{
   
        // 执行器内部的resolve, reject一定要放在一个异步环境下调用!!!
        setTimeout(()=>{
   
            resolve()
        },2000)
    })

promise是一个状态机，在promise状态改变时， 可以决定其then方法中的两个参数什么时候进队列，谁进队列。

then方法有两个参数是两个回调，这两个回调中的一个回调最终是要进队列的，至于是哪一个回调什么时候进队列取决用这个then方法的promise对象的状态什么时候发生改变，改变成什么状态

//此处代表执行时，promise处于初始化状态
let promise = promise.then(() =>{
   },()=>{
   })

then方法返回一个新的Promise，而它的行为与then中的回调函数的返回值有关：

• 如果then中的回调函数返回一个值，那么then返回的Promise将会成为成功状态，promise持有的值就是该返回值。

• 如果then中的回调函数返回一个Promise，那么then返回的Promise会继承他的状态和值

• 如果then中的回调函数抛出一个错误，那么then返回的Promise将会成为失败状态，promise持有的值就是错误原因

  //此处代表执行时，promise处于初始化状态
  promise.then(()=>{
       },()=>{
       })
  

4 promise面试题

    // 输出: 1 2 10 5 6 8 9 3

    //p2 创建完就是成功状态 持有的值为5
    //p1 创建完就是成功状态 持有的值为6
    //p3 创建完就是成功状态 持有的值为9

    const p1 = () => (new Promise((resolve, reject) => {
   
        console.log(1);
        let p2 = new Promise((resolve, reject) => {
   
            console.log(2);
            const timeOut1 = setTimeout(() => {
   
                console.log(3);
                resolve(4);
            }, 0)
            resolve(5);
        });
        resolve(6);
        p2.then((arg) => {
   
            console.log(arg);
        });
    }));

    const timeOut2 = setTimeout(() => {
   
        console.log(8);
        const p3 = new Promise(reject => {
   
            reject(9);
        }).then(res => {
   
            console.log(res)
        })
    }, 0)


    p1().then((arg) => {
   
        console.log(arg);
    });
    console.log(10);

5 async&await

async函数返回一个新的promise，而他的行为与async函数的代码体有关

• 如果async函数代码体返回一个值，那么async函数返回的promise将会成为成功状态，promise持有的值就是该返回值
• 如果async函数代码体返回一个promise，那么async函数返回的promise与当前代码体返回的promise一致
• 如果async函数代码体抛出一个错误，那么async函数返回的promise将会成为失败状态，promise的值就是错误原因

//await等于一个promise，当等待的promise状态明确之后，async函数才会继续往下执行
 (async function(){
   
        try {
   
            const {
   data:{
   items}} = await axios.get