前端小白成长之09--Promise

1.Promise对象的then方法会返回一个全新的 Promise

2.对象后面的then方法就是在为上ー个then返回的 Promise注册回调

3.前面then方法中回调函数的返回值会作为后面then方法回调的参数

4.如果回调中返回的是 Promise，那后面then方法的回调会等待它的结束

5.promise的错误一般放在catch中去捕获，因为promise链条上任何一个错误都会向后传递直到被捕获，Catch更像是给整个promise链条注册的失败回调，而reject只对当时第一个promise的异常捕获

一般promise错误用回调catch

6.promise.all promise.race

并行操作，全部完成才会返回一个数组，每个请求的响应数据
Race返回第一个请求完成的结果，和all不同，all要全部完成

const url3 = [
    'https://api.github.com',
    'https://api.github.com/users',
    'https://sssdfsd.com/sdfsd
]

const promise = urls.map(m=>axios(m).catch(e=>'haha'));//处理每一个catch，catch也会产生一个then，进入下面all
const  p =promise.all(promise);
p.then(res=>{
    console.log(res); 
}).catch(error=>console.log(error));

-------------------
es2020出来后
const  promise  = Promise.allsettled(urls.map(item=>axios(item)))
promise.then(res=>{
    //res就是[{statuc:'fulfiled',value:''},{statuc:'rejected',value:''，reason:Error}]失败也会进回调
})

7.微任务

Promise.then
Object.observe
MutaionObserver
process.nextTick(Node.js 环境)

8.宏任务

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

async function t1() {
  let a = await "lagou";
  console.log(a);
}
t1();// lagou
-------------------------------------------
async function t2() {
  let a = await new Promise((resolve) => {});
  console.log(a);
}
t2()//一直在pending状态，啥也不打印
-------------------------------------------------------
async function t3() {
  let a = await new Promise((resolve) => {
    resolve();
  });
  console.log(a);
}
t3();//undefied
-------------------------------------------

async function t4() {
  let a = await new Promise((resolve) => {
    resolve("hello");
  });
  console.log(a);
}
t4();//hello
-----------------------------------------
async function t5() {
  let a = await new Promise((resolve) => {
    resolve("hello");
  }).then(() => {
    return "lala";
  });
  console.log(a);
}
t5();//lala
-----------------------------------------
async function t6() {
  let a = await fn().then((res) => {
    return res;
  });
  console.log(a);
}
async function fn() {
  await new Promise((resolve) => {
    resolve("lagou");
  });
}
t6();//Undefined fn没有返回值
------------------------------------------
async function t7() {
  let a = await fn().then((res) => {
    return res;
  });
  console.log(a);
}
async function fn() {
  await new Promise((resolve) => {
    resolve("lagou");
  });
  return "lala";
}

t7();//lala
----------------------------------
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
//打印1，then里面接受的不是一个函数，就会发生值穿透问题

.then(res=>{
  console.log(res)
})
就是.then(console.log)的简写

结论：catch也会返回一个promise实例，并且是resolved状态

Promise.resolve('hello')
  .then(res=>{
    return new Promise(resolve=>{
      var b=res + 'lagou';
      throw new Error('错误信息');
      resolve(b);
    }).catch(error=>{
    console.log('error:',error)//如果这个catch拿掉，有错就会走最下面的catch，之前的then都不走了，直接跳到catch捕获错误
    })
  }).then(res=>{
    var c = res + "I ❤ U";
    console.log(c);
  }).catch(error=>{
    console.log('error:',error)
  })


//走到fools + await Promise时，fools是100，后面awiat是异步，进入微任务，等待console.log('s'+fools)结束，继续执行微任务 console.log('d'+fools)，打印出110
var fools =100;
async function main(){
  fools = fools + await Promise.resolve(10);
  console.log('d'+fools)
};
main();
fools++;
console.log('s'+fools);