目录
1,Promise
当new 一个Promise实例时,实际内部代码被运行了。
new Promise(function(resolve){
console.log('test'); resolve('result');
});
//在控制台输出:
//test
//一个状态为fulfilled,结果为 'result'的 Promise实例:
//Promise{...}
上面代码段创建一个 Promise实例且Promise内部代码也被执行,并在控制端输出 ‘test’, 返回的是一个Promise实例且其状态是 fulfilled,包含的结果为 'result'。在Promise实例上能使用的方法有then、catch、finally; 如这样使用 then方法:
promiseObj.then(function(val){
console.log(val)
});
//控制台输出:
//result
在控制台输出‘result’。Promise的函数参数可有两个参数:resolve和reject,像这样 :
new Promise(function(resolve, reject){
reject('test'); //跟resolve一样,可传参可不传
}).catch(function(err){
console.log(err);
});
//创建一个状态为rejected的Promise实例;可能因浏览器的不同,有些浏览器面对rejected状态的promise实
//例会在控制台报错,可在Promise实例后加上catch捕获异常。但setTimeout里的错误,不会被catch捕获。
//一般使用resolve比较友好。
2,Async await
首先await只能在Async函数内使用。
Async是个关键字,用来定义异步函数:
Async function asyncFn([param1, [param2]])
{
let lastVal = await new Promise(function(resolve){
setTimeout(function(){ resolve('promise') }, 1000);
});
//lastVal是最后一次返回的结果,这个结果可能是resolve中传入的结果,
//也可能是回调函数中return的结果。
console.log(lastVal);
console.log('1s 之后');
return 'timeout';
}
//定义了一个异步函数
以上代码段定义了一个异步函数,其实跟普通函数一样,被调用后,内部代码才能被执行;像以下这样调用异步函数:
var proObj = asyncFn();
console.log('console here');
//在控制台输出:
//console here
//promise
//1s 之后
//proObj是个 状态为pending的Promise实例,也就是异步函数的调用返回的结果是个Promise实例
//当asncFn的await的逻辑执行完成后,proObj的状态会变成fulfilled,且返回值是'timeout'。
proObj.then(function(val){
console.log(val);
});
//在控制台输出:
//'timeout'
在控制台输出 'console here'、'promise' 和'1s 之后'。异步函数的调用不会阻塞后面的代码,虽然await阻塞了异步函数内部即await后面的代码。
那Promise 和Async await有什么区别或者什么时候该用哪个?有没有执行顺序的要求,比如说需不需要等待某个异步执行的结果,如需要,我们可以使用Async await的语法。另外 Async/await 避免繁冗的回调函数,而且比起Promise的链式调用,Async/await 的代码更简便以及易读易懂。
function te(){
return new Promise(function(resolve, reject){
setTimeout(() =>
resolve('from te ')
, 2000);
});
}
async function ta(){
return await new Promise(function(resolve, reject){
setTimeout(() =>
resolve('from ta')
, 1000);
});
}
//等待te和ta的异步调用,等te resolve回数据后,才继续调用ta的,同样等待ta resolve的执行。
async function asncFn(){
var result1 = await te();
var result2 = await ta();
console.log(result1 + result2); //from te from ta
return result1 + result2 + ' PV';
}
asncFn().then((re) =>
console.log('Result is ' + re) //Result is from te from ta PV
).catch((e) =>
console.log('error from ' + e) //error from $(e)
);
//输出如下:
//from te from ta
//Result is from te from ta PV
//若是te和ta任意一个reject结果,那么catch会捕获错误--------
//比如te函数中,resolve('from te ')替换成reject('from te '), 上述代码的执行输出:
//error from from ta
//但是如果te函数中,加上catch回调函数,先捕获到reject的抛出的错误,那么就不影响asyncFn函数的执行
//说到异常------------
//1,te和ta在resolve执行后抛出异常,不会影响异步函数的执行以及结果;
//只是若是无法被捕获的,会抛出错误,
function te(){
return new Promise(function(resolve, reject){
setTimeout(() => {
resolve('from te ');
throw('error'); //无法被捕获,直接抛出,不影响异步函数的执行
}
, 2000);
});
}
//若是能异步函数内部处理会被忽略,不抛错也不被catch或error回调捕获。
function te(){
return new Promise(function(resolve, reject){
resolve('from te ');
throw('error'); //被忽略,不影响异步函数的执行
});
}
//2,将1中的代码的resolve和throw语句调换以下位置
//结果会变成这样:
//第一个抛出错误,异步函数受影响停止执行;
//第一个异常被catch捕获,异步函数内之后代码都受到影响停止执行;
//只是第一个的影响是全局性的,第二个的影响是局部性的。
3,注意:下面两个函数的功能是一样的:
function fnPromise(){
return new Promise(function(resolve){
resolve(true);
});
}
async function fnAsync(){
var re = await fnPromise();
return re; //相当于resolve回一个数值re;
}
//以上两个函数实现一样的功能。
var promise1 = fnPromise();
var promise2 = fnAsync();
4,其他文档