1.异步编程
事件循环机制:
Eventlop:
微任务
promise.then回调: async
宏任务
script setTimeOut setInterval 的回调函数
http 请求:
ajax axios请假
加载地图
加载图表等。
难题:
异步程序不知道是什么时候结束。
2:async
function foo() {
}
const bar = () => {
}
// 语法糖:具有一定更能性的内容,就是语法糖
async function fun() {
// return 给 async fun 饭会的promise.[[promiseResult]] 赋值的。
return 241324323
}
let res = fun();
console.log(res);
// asnyc 函数特点:
// 1:是一个语法糖
// 2:函数执行时候返回值是一个prmise实例对象,(与定义async函数中return 没有关系)
// 3:返回的promise实例对象的 状态为 fulfilled
// async 中return 作用是什么?
3:await
async function bar(){
return 1235
}
// bug:await 只能在 async 的方法体中有效
// function foo(){
// await bar();
// }
async function foo(){
// 语法: await promise实例对象;\
// 作用: 获取await的promise实例对象中的[[PromiseResutl]] 的赋值;
let res = await new Promise((resolve)=>{
console.log('同步代码');
resolve(123) // 给 [[PromiseResutl]] 赋值
})
// ---> = await prmise实例对象(new)
// ----> = resove(实参)
// -----> = [[promiResult]]的赋值
// -----> = 123
console.log(res);
// let b = await bar();
// = await promis对象;
// = promis对象.[[PromiseReuslt]]
// = 1235
// console.log(b);
// let p = bar();
// let b = await p;
// console.log(p);
// console.log(b);
}
foo()
/*
总结:
1 await 只能在async函数中编写
2 await 必须根promise实例对象
3 awiat 获取await后的promise实例对象的 [[promiseResult]] 的赋值
因为浏览器编译 [[xxxx]] 不支持 obj.xxx取值方式,要么api 获取 要么 关键字获取。
所以 [[PromiseResult]] 的获取值有多种方式:
总结如下:
1: await
2: then回调函数形参
*/
/*
[[PromiseResult]]特点:
1:每个promise 实例对象都有该属性
2:赋值方式有以下:
1:new Promise 的resolve() 是实参
2:then 的retrun
3: async 函数的return
3:渎值的方式如下:
1: await
2: then 的回参
*/
/**
* 套路:在多个promise对象中共,如何直到获取的是哪个promise实例的[[PromiseResult]]:
* 1: 判断:是不是promise实例对象,console.log() 打印
* 2:如果是:再看 [[promiseResult]] 赋值
* 2.1 直接.then
* 2.2 在当前情况下 搭建一个async 函数 用await
*
*
* 排错:如果不是prmise实例对象;往上找,改代码
* 如果是promise 但是:[[PromiseResult]] 赋值undefined
* 1:该promise是如何创建的?
* new Promise ---> resolve() 没有 实参
* then()返回值 ----> then回调的没有 return
* async 返回值 ----> async 中没有 retrun
*/
4:网络请求
// 难题:没办法知道哪个哪个请求是第一个响应完毕的
// 无法知道,哪个请求是最后一个响应的
axios({}).then(res => {
console.log(1);
});
axios({}).then((result) => {
console.log(2);
})
axios({}).then((result) => {
console.log(3);
});
(async function () {
let a = await axios({})
console.log(1);
let b = await axios({})
console.log(2);
let c = await axios({});
console.log('三个请求都借宿了');
})()
// 等三个请求都成功了....
// 请说出输出顺序
// axios({}).then(res => {
// console.log(1);
// axios({}).then(res => {
// console.log(2);
// axios({}).then(res => {
// console.log(3);
// });
// });
// });
5:捕获错误
try{
(async function(){
console.log('1111');
let p = await new Promise((res,rej)=>{res(1)});
console.log(2222222222);
// 在 try 中 多个 promise 只要有一个变为已拒绝状态,下面所有promise不执行,直接执行catch
let p1 = await new Promise((res,rej)=>{rej(321)});
console.log(3333333333333333);
let p2 = await new Promise((res,rej)=>{res(1)});
console.log(444444444444444);
let p3 = await new Promise((res,rej)=>{res(1)});
console.log(555555555555);
})()
}catch(err){
console.log('用户捕获asyn中的错误');
}
// 1:应用
// 2:promise A+ 规范
// 3:promise的原理
手写Promise
class Promise {
constructor(cb){
const resolve = (data)=>{
}
const reject = () =>{
}
cb(resolve,reject)
}
then = (cb)=>{
return new Promise()
}
static all = ()=>{
}
}
let p = new Promise((resolve,reject)=>{
})
结论:
- 手写bind
- 手写promise
- instance 原理
- v8 垃圾回收机制
- new 的原理的是什么