一、回调函数篇
1、单线程同步执行案例
let girlname = '张三';
function start () {
girlname = '黄蓉';
console.log(`我是${ girlname }`);
}
function end() {
console.log(`${girlName}你好,我是郭靖,认识一下吧`);
}
start();
end();
上面案例不存在异步,单线程同步执行,最后输出:
// 我是黄蓉
// 黄蓉你好,我是郭靖,认识一下吧
2、当发生异步时
let girlname = '张三';
function start () {
setTimeout(() => {
girlName = "黄蓉"
console.log(`我是${ girlname }`);
}, 0);
}
function end() {
console.log(`${girlName}你好,我是郭靖,认识一下吧`);
}
start();
end();
输出结果:
// 张三你好,我是郭靖,认识一下吧
// 我是黄蓉
对比两次输出结果,由于start函数中存在异步,所以只有等主线程走完,才能走异步函数;
这时就可以通过回调函数解决这种问题
let girlname = '张三';
function start (callBack) {
setTimeout(() => {
girlName = "黄蓉"
console.log(`我是${ girlname }`);
callBack();
}, 0);
}
function end() {
console.log(`${girlName}你好,我是郭靖,认识一下吧`);
}
start(end);
输出结果为:
// 我是黄蓉
// 黄蓉你好,我是郭靖,认识一下吧
学习文章:https://segmentfault.com/a/1190000017935821
二.Promise对象篇
1、
resolve :调用 resolve 代表一切正常;
reject:出现异常时所调用的;
.then() :可以将参数中的函数添加到当前 Promise 的正常执行序列;
.catch() :则是设定 Promise 的异常处理序列;
.finally() :是在 Promise 执行的最后一定会执行的序列。
2、代码示例resolve() 中可以放置一个参数用于向下一个 then 传递一个值,
then 中的函数也可以返回一个值传递给 then;
new Promise(function (resolve, reject) {
console.log(1111);
if(success){
resolve(2222);
}else{
reject('失败的结果')
}
}).then(function (value) {
console.log(value);
return 3333;
}).then(function (value) {
console.log(value);
throw "An error";
}).catch(function (err) {
console.log(err);
});
输出结果:
1111
2222
3333
An error
三. async 函数篇
1、格式
async function aa(){
await '任务1'
await '任务2'
}
2、async:它被放置在一个函数前面
函数前面的async一词意味着一个简单的事情:这个函数总是返回一个promise,如果代码中有return <非promise>语句,JavaScript会自动把返回的这个value值包装成promise的resolved值。
代码案例:
async function f() {
return 1
}
f().then(alert) // 弹出1
async function f() {
return Promise.resolve(1)
}
f().then(alert) // 弹出1
3、await:只能在async函数内部使用
关键词await可以让JavaScript进行等待,直到一个promise执行并返回它的结果,JavaScript才会继续往下执行。
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('done!'), 1000)
})
let result = await promise // 直到promise返回一个resolve值(*)
alert(result) // 'done!'
}
f()
函数执行到(await)行会‘暂停’,不再往下执行,当promise处理完成后重新恢复运行, resolve的值成了最终的result,所以上面的代码会在1s后输出'done!
关于async/await总结:
放在一个函数前的async有两个作用:
使函数总是返回一个promise
允许在这其中使用await
promise前面的await关键字能够使JavaScript等待,直到promise处理结束。然后:
如果它是一个错误,异常就产生了,就像在那个地方调用了throw error一样。
否则,它会返回一个结果,我们可以将它分配给一个值