【单线程同步】
例如:
来了一个顾客(一个请求),就分配一个服务员(内存空间),服务员将顾客点的菜交给后厨(后台),后厨开始做菜,厨房得把这个顾客点的菜做好了,交给服务员,服务员端给这个顾客,完成后才会招待下一位顾客。
注:
一个时间只有一个事情在做,完成后才可进入下一个事情
【单线程异步】
例如:
来了一个顾客(一个请求),就分配一个服务员(内存空间),服务员将顾客点的菜交给后厨(后台),后厨开始做菜,此时服务员空闲了,可以招待下一位顾客,把下一个才告诉后厨
注: 异步就可以做很多事情。
【单线程异步】
我只管把我的需求交给系统,我告诉他你要帮我做这个事情,但是告诉他之后我, 还能做其他事情,系统处理完我的需求后主动调用我刚刚的方法。
【进程】
启动一个程序 计算机里面就是启动了一个进程。(即:分配了一段内存空间,这个空间交给这一个程序进行执行。)
【线程】
在进程里面又可以把这个内存分成一块一块的,每一块来运行一个线程。
注:
没有进程,就不可能有线程。
【任务池】
放任务的(即异步的函数) 浏览器端的异步函数 。1、setTimeou 2、 setInterval 3、ajax的回调
setTimeout(()=>{
console.log(1)
},0)
这里的0并不是立即执行, 假如同步代码有很多,第一行就有setTimeout0,得先把其他代码
代码执行完成, 主线程空闲下来的时候,才会去查看任务宠有没有任务,才会去执行setTimeout0
异步做远程接口
【第一阶段】
“回调地狱”回调代码的表现形式:嵌套:不方便阅读
const callback = () => {
// result 结果,将1-16的数字放进来
let result = [];
//发送请求
request({
type: "post",
url: "/users/one",
success(data) {
console.log(data);
request({
type: "post",
url: "/users/two",
success(data) {
console.log(data);
request({
type: "post",
url: "/users/three",
success(data) {
console.log(data);
request({
type: "post",
url: "/users/four",
success(data) {
console.log(data);
}
});
}
});
}
});
}
});
};
【 第二阶段】
依赖了一个promise的函数,将异步的函数封装在promise的内。 .then方法接收成功之后的返回值,第一次是resolve扔出来的值,之后每次接收的是上一次.then方法的返回值
第二阶段 Promiseto , 通过 Promise将异步函数封装
const _Promise = () => {
// Promise构造函数 接收两个参数 resolve reject
// resolve是异步成功之后执行的函数
// reject 当有异常的时候执行的函数 例如:网络中断
// new Promise((resolve,reject) 同步,所以先执行1,在执行2 最后在执行异步3
new Promise((resolve, reject) => {
// console.log(1);
// request 返回才执行 异步
request({
type: "post",
url: "/users/one",
// success表示异步成功,所以就调用resolve方法
success(data) {
// 通过resolve将data扔出去,then方法接收
resolve(data);
// console.log(3);
}
});
// console.log(2);
})//.then方法接收成功之后的返回值,第一次是resolve扔出来的值,之后每次接收的是上一次then方法的返回值
.then((data) => {
console.log(data);
return new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/two",
success(data) {
resolve(data);
}
});
})
})
.then((data) => {
console.log(data);
return new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/three",
success(data) {
resolve(data);
}
});
})
}).then((data) => {
console.log(data);
return new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/four",
success(data) {
resolve(data);
}
});
})
}).then((data) => {
console.log(data);
})
}
注: 第二阶段在代码上的表现形式看着舒服很多 也存在很多.then。
【第三阶段】
generator 函数,专门处理异步函数 ,声明方法与普通函数一样,但是在funtion后面加* ,yield关键字
掌握:
1、怎么去定义generator函数(funtion*)
2、yield是干嘛用的? next()调用的时候会把,yield后面的值返回出去,变成value的值
3、next的参数可以传递到gen函数的内部
function* gen() {
const data1 = yield new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/one",
// success表示异步成功,所以就调用resolve方法
success: resolve
});
});
console.log(data1);
const data2 = yield new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/two",
// success表示异步成功,所以就调用resolve方法
success: resolve
});
});
console.log(data2);
const data3 = yield new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/three",
// success表示异步成功,所以就调用resolve方法
success: resolve
});
});
console.log(data3);
const data4 = yield new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/four",
// success表示异步成功,所以就调用resolve方法
success: resolve
});
});
console.log(data4);
}
【第四阶段】
// 异步做远程接口统一用async/await
// 第四阶段 async/await
// 第三阶段有一个run的辅助函数,第四阶段就将其处理掉
// async/await 的用法
async function _asyncFn(){
const data1 = await new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/one",
// success表示异步成功,所以就调用resolve方法
success: resolve
});
});
console.log(data1);
const data2 = await new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/two",
// success表示异步成功,所以就调用resolve方法
success: resolve
});
});
console.log(data2);
const data3 = await new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/three",
// success表示异步成功,所以就调用resolve方法
success: resolve
});
});
console.log(data3);
const data4 = await new Promise((resolve, reject) => {
request({
type: "post",
url: "/users/four",
// success表示异步成功,所以就调用resolve方法
success: resolve
});
});
console.log(data4);
}