promise和async/await区别

7,792 阅读2分钟

promise和async/await都是处理异步请求

promise的用法 基本语法:

promise共有三个状态 链式调用

错误捕获

async、await

用法

错误捕获

区别: 拓展:js中同步、异步 js的同步和异步问题通常是指ajax的回调,如果是同步调用,程序在发出ajax调用后就会暂停,直到远程服务器产生回应后才会继续运行。而如果是异步调用,程序发出ajax调用后不会暂停,而是立即执行后面的代码,服务器返回信息后会自动触发回调函数进行处理。相比较而言,异步调用的性能最佳,程序不会出现卡顿的现象,而同步调用则通常用于需要立即获得结果并实时处理的情况。

promise的用法

Promise,简单来说就是一个容器,里面保存着某个未来才会结束的时间(通常是一个异步操作的结果)

基本语法:

let p = new Promise((resolve,reject) => {
        //...
        resolve('success')
    });
    
    p.then(result => {
        console.log(result);//success
    });

promise共有三个状态

pending(执行中)、success(成功)、rejected(失败)

链式调用

错误捕获

Promise.prototype.catch用于指定Promise状态变为rejected时的回调函数,可以认为是.then的简写形势,返回值跟.then一样

`let p = new Promise((resolve,reject) => {
    reject('error');
});

p.catch(result => {
    console.log(result);
})`

async、await

简洁:异步编程的最高境界就是不关心它是否是异步。async、await很好的解决了这一点,将异步强行转换为同步处理。 async/await与promise不存在谁代替谁的说法,因为async/await是寄生于Promise,Generater的语法糖。

用法

async用于申明一个function是异步的,而await可以认为是async wait的简写,等待一个异步方法执行完成。 规则: 1 async和await是配对使用的,await存在于async的内部。否则会报错 2 await表示在这里等待一个promise返回,再接下来执行 3 await后面跟着的应该是一个promise对象,(也可以不是,如果不是接下来也没什么意义了…)

写法: `async function demo() { let result01 = await sleep(100); //上一个await执行之后才会执行下一句 let result02 = await sleep(result01 + 100); let result03 = await sleep(result02 + 100); // console.log(result03); return result03; }

demo().then(result => {
    console.log(result);
});`

错误捕获

如果是reject状态,可以用try-catch捕捉

let p = new Promise((resolve,reject) => {
    setTimeout(() => {
        reject('error');
    },1000);
});

async function demo(params) {
    try {
        let result = await p;
    }catch(e) {
        console.log(e);
    }
}

demo();

区别:

1 promise是ES6,async/await是ES7
2 async/await相对于promise来讲,写法更加优雅
3 reject状态:
    1)promise错误可以通过catch来捕捉,建议尾部捕获错误,
    2)async/await既可以用.then又可以用try-catch捕捉