promise async await 让编码更优雅 高效

背景

语言都是在不断发展和完善的, 从同步到异步, 异步 中的一般的异步方法回调 等再到promise, promise 中then使用也是比较烦, 现在也出来了asycn 和await 关键字, 让代码更加的简洁, 让异步编程做起来根由同步的感觉。 这两个关键字和 python 3.5 之后出来的用于异步的asnyc await 简直是一模一样, 让我这 Python 开发者感觉到好亲切。async await 是es7 规范出来的。promise 是 Es6 中出来的。

话说回来 async await 不是和promise相斥的。 这连个关键字是在promise 之上的, 就像Python中 也不是和yieldfrom 相对的。
async await 是配合promise 使 js的异步更加完美。

在项目中使用

处理返回通知, promise axios 然后使用 async 和await

export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}

这里返回的是以个promise 对象, 再调用的时候使用await await 使用就不需要then() then() 的

具体讲解

1 先来看下个例子

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};

var start = async function () {
    // 在这里使用起来就像同步代码那样直观
    console.log('start');
    await sleep(3000);
    console.log('end');
};

start();

控制台先输出start,稍等3秒后,输出了end。

基本规则

async 表示这是一个async函数,await只能用在这个函数里面。

await 表示在这里等待promise返回结果了,再继续执行。

await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了…)

获得返回值

await等待的虽然是promise对象,但不必写.then(..),直接可以得到返回值。


var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 返回 ‘ok’
            resolve('ok');
        }, time);
    })
};

var start = async function () {
    let result = await sleep(3000);
    console.log(result); // 收到 ‘ok’
};

捕捉错误

既然.then(..)不用写了,那么.catch(..)也不用写,可以直接用标准的try catch语法捕捉错误。

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 模拟出错了,返回 ‘error’
            reject('error');
        }, time);
    })
};

var start = async function () {
    try {
        console.log('start');
        await sleep(3000); // 这里得到了一个返回错误

        // 所以以下代码不会被执行了
        console.log('end');
    } catch (err) {
        console.log(err); // 这里捕捉到错误 `error`
    }
};

循环多个await

await看起来就像是同步代码,所以可以理所当然的写在for循环里,不必担心以往需要闭包才能解决的问题。

..省略以上代码

var start = async function () {
    for (var i = 1; i <= 10; i++) {
        console.log(`当前是第${i}次等待..`);
        await sleep(1000);
    }
};

值得注意的是,await必须在async函数的上下文中的。

var start = async function () {
    for (var i = 1; i <= 10; i++) {
        console.log(`当前是第${i}次等待..`);
        await sleep(1000);
    }
};

async await 好在哪里

先来看下个简单例子

function timeout(ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}

async function asyncPrint(value, ms) {
    await timeout(ms);
    console.log(value);
}

asyncPrint('hello world', 50);

50毫秒以后,输出hello world

1. 简约而干净Concise and clean

我们看一下上面两处代码的代码量,就可以直观地看出使用Async/await对于代码量的节省是很明显的。对比Promise,我们不需要书写.then,不需要新建一个匿名函数处理响应,也不需要再把数据赋值给一个我们其实并不需要的变量。同样,我们避免了耦合的出现。这些看似很小的优势其实是很直观的,在下面的代码示例中,将会更加放大。

2. 错误处理Error handling
Async/await使得处理同步+异步错误成为了现实。我们同样使用try/catch结构,但是在promises的情况下,try/catch难以处理在JSON.parse过程中的问题,原因是这个错误发生在Promise内部。想要处理这种情况下的错误,我们只能再嵌套一层try/catch,就像这样


const makeRequest = () => {
    try {
    getJSON()
        .then(result => {
            // this parse may fail
            const data = JSON.parse(result)
            console.log(data)
        })
        // uncomment this block to handle asynchronous errors
        // .catch((err) => {
        //   console.log(err)
        // })
        } 
    catch (err) {
        console.log(err)
    }
}

但是,如果用async/await处理,一切变得简单,解析中的错误也能轻而易举的解决:

 const makeRequest = async () => {
      try {
          // this parse may fail
          const data = JSON.parse(await getJSON())
          console.log(data)
      } 
      catch (err) {
          console.log(err)
      }
   }

3.条件判别Conditionals
想象一下这样的业务需求:我们需要先拉取数据,然后根据得到的数据判断是否输出此数据,或者根据数据内容拉取更多的信息。如下:

const makeRequest = () => {
    return getJSON()
        .then(data => {
            if (data.needsAnotherRequest) {
                return makeAnotherRequest(data)
                        .then(moreData => {
                            console.log(moreData)
                            return moreData
                        })
            } 
            else {
                console.log(data)
                return data
            }
        })
}

这样的代码会让我们看的头疼。这这么多层(6层)嵌套过程中,非常容易“丢失自我”。
使用async/await,我们就可以轻而易举的写出可读性更高的代码:

const makeRequest = async () => {
    const data = await getJSON()
    if (data.needsAnotherRequest) {
        const moreData = await makeAnotherRequest(data);
        console.log(moreData)
        return moreData
    } 
    else {
        console.log(data)
        return data    
    }
}

4.中间值Intermediate values
一个经常出现的场景是,我们先调起promise1,然后根据返回值,调用promise2,之后再根据这两个Promises得值,调取promise3。使用Promise,我们不难实现:

const makeRequest = () => {
    return promise1()
        .then(value1 => {
            // do something
            return promise2(value1)
                .then(value2 => {
                    // do something          
                    return promise3(value1, value2)
                })
        })
}

如果你难以忍受这样的代码,我们可以优化我们的Promise,方案是使用Promise.all来避免很深的嵌套。
就像这样:



const makeRequest = () => {
    return promise1()
        .then(value1 => {
            // do something
            return Promise.all([value1, promise2(value1)])
        })
        .then(([value1, value2]) => {
            // do something          
            return promise3(value1, value2)
        })
}

Promise.all这个方法牺牲了语义性,但是得到了更好的可读性。
但是其实,把value1 & value2一起放到一个数组中,是很“蛋疼”的,某种意义上也是多余的。

同样的场景,使用async/await会非常简单:

const makeRequest = async () => {
    const value1 = await promise1()
    const value2 = await promise2(value1)
    return promise3(value1, value2)
}

5错误堆栈信息Error stacks
想象一下我们链式调用了很多promises,一级接一级。紧接着,这条promises链中某处出错,如下:

const makeRequest = () => {
    return callAPromise()
        .then(() => callAPromise())
        .then(() => callAPromise())
        .then(() => callAPromise())
        .then(() => callAPromise())
        .then(() => {
            throw new Error("oops");
        })
}

makeRequest()
    .catch(err => {
        console.log(err);
        // output
        // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
    })

此链条的错误堆栈信息并没用线索指示错误到底出现在哪里。更糟糕的事,他还会误导开发者:错误信息中唯一出现的函数名称其实根本就是无辜的。
我们再看一下async/await的展现:

const makeRequest = async () => {
    await callAPromise()
    await callAPromise()
    await callAPromise()
    await callAPromise()
    await callAPromise()
    throw new Error("oops");
}

makeRequest()
    .catch(err => {
        console.log(err);
        // output
        // Error: oops at makeRequest (index.js:7:9)
    })

也许这样的对比,对于在本地开发阶段区别不是很大。但是想象一下在服务器端,线上代码的错误日志情况下,将会变得非常有意义。你一定会觉得上面这样的错误信息,比“错误出自一个then的then的then。。。”有用的多。
调试Debugging

最后一点,但是也是很重要的一点,使用async/await来debug会变得非常简单。
在一个返回表达式的箭头函数中,我们不能设置断点,这就会造成下面的局面:

const makeRequest = () => {
    return callAPromise()
        .then(()=>callAPromise())
        .then(()=>callAPromise())
        .then(()=>callAPromise())
        .then(()=>callAPromise())
}

我们无法在每一行设置断点。但是使用async/await时:

const makeRequest = async () => {
    await callAPromise()
    await callAPromise()
    await callAPromise()
    await callAPromise()
}

es6 中的新特性是要好好看看的
http://es6.ruanyifeng.com/#docs/symbol

你可能感兴趣的:(javascript,es6)