异步解决方案
回调
等函数执行完成在执行某一个(回调);
function test(x){
setTimeout(function(){
console.log(111)
x();
}, 1000)
}
function fn() {
console.log("fn函数执行")
}
// 执行函数、传参
test(fn);
为了避免回调地狱:(嵌套太深,导致无法维护,根本没法去看,阅读性太难),使用Promise对象;
Promise
- 必须在方法体内返回一个Promise的实例,然后得到两个参数,一个叫resolve(成功),一个叫reject(失败)
- 特点:
1、执行是按照我们指定的顺序执行的
2、执行时间太长,太死板
// Promise
// resolve 成功之后返回 reject 失败
// Promise 接受两个函数参数 成功时调用resolve 失败调用reject
var a = function () {
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve("a") ;
}, 1000);
})
}
var b = function () {
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve("b") ;
}, 2000);
})
}
var c = function () {
return new Promise(function(resolve, reject){
setTimeout(function(){
resolve("c") ;
}, 3000);
})
}
// 链式调用
// then 接受两个函数参数 第一个是成功时候执行(必须) 第二个是失败执行(非必须,一般不写,用catch处理失败)
console.time("promise")
a().then(function(a){
console.log(111);
return b();
}).then(function(b){
console.log(222);
return c();
}).then(function(c){
console.log(333);
console.timeEnd("promise")
}).catch(function(){
console.log("出错了");
})
Promise.all
- 特点
1、执行顺序是按照方法本身的时间/效率来执行的
2、执行时间短,灵活
// 执行多个Promise
Promise.all([a(),b(),c()]).then(function(result){
console.log("over");
});
async (ES7)
- async/await是一对黄金搭档,必须一起用,还是基于Promise的。
特点:
1、保证的是代码的可读性以及代码的顺序性
2、使我们的阅读逻辑更加清晰
var sleep = function(time) {
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log("sleep函数执行")
resolve();
},time)
})
}
// 给方法一个标识async, 告诉他这是一个需要异步的函数
var start = async function() {
console.log("函数开始点");
await sleep(1000);
console.log("函数结束点");
}
start();
// 函数开始点
// async.html:18 sleep函数执行
// async.html:28 函数结束点
如果没有使用async 执行顺序为:
- 函数开始点
- 函数结束点
- sleep函数执行
基本规则
1、async表示这是一个异步函数,await只能应用在这个async函数里面
2、await表示在这里,会等待Promise返回结果之后再继续执行
3、await后面跟着的应该是一个Promise对象,但是如果不是,也就是返回其他值的情况下,代码不会出现错误,但是也不会出现代码同步的效果了
4、await必须在async函数的上下文当中
generator
- 有两个特征。
一是,function关键字与函数名之间有一个星号;
二是,函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)。
异步解决方案、一个语法糖;
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';//return表示执行完成了,后面没有代码执行了,则返回的done为true
yield "aa";//如果之前就return了 这个不会输出
}
/*
上述方法定义了三个状态,可以用hw.next()得到里面定义的状态
每次调用执行下一个 直到最后一个或者return
*/
var hw = helloWorldGenerator();
其他
字符串拼接
符号用 ` 字符创 `, 变量用${变量};
如:
var html = `<div>字符创中直接使用变量${a}和${b} </div>`