关于js异步的写法

关键字: Promise js异步 vue
参考文章:
http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
https://blog.csdn.net/shan1991fei/article/details/78966297
https://blog.csdn.net/hey_zng/article/details/75151853
https://segmentfault.com/a/1190000010420744

背景

最近写前端业务，需要顺序请求多个api，因此研究了一下比较好的异步写法。在此记录。

Promise.then写法

1. 一般写法

• Promise对象在new 的时候接收function类型的参数
• .then函数接收一个function类型的参数，该function需要返回一个Promise对象
• .then中的回调函数如果有返回值，会作为下一个.then回调函数的输入；如果没有返回值，则默认返回undefined

2. 循环内的使用

• 先执行for循环，然后才会异步调用then里的promise，所以需要如下的执行方式：

var pList= [];
for (var i = 0; i < 10; i++) {
    pList.push(createPromise());//放入Promise对象
}
Promise.all(pList)
    .then(function(responses) { //这边的then接收的是之前所有all函数的执行结果，是一个list
        for (i = 0; i < responses.length; i++)
            console.log(responses[i].data);
        }

    )

关于Promise对象的个人体会

promise语法的本质是为了方便写回调函数

例子：

var p = new Promise( _ => {
    {一段异步代码}
})
p.then( r => {
  console.log('callback');
})

等价于：

new Promise( _ => {
    {一段异步代码}
    {console.log('callback');}
})

• promise的写法保证执行完{异步代码}后再执行之后的内容。
• 每个.then函数可以理解为向上一个Promise对象的function中嵌套代码

个人实践中总结出的结构化写法

在VUE中按面向对象的思路写异步部分

• fileX.js中定义了class A

export class A {
    constructor() {this.str = '请求api...'}
    load() { //模拟api异步请求(VUE中的request对象)
        return new Promise(function(resolve, reject) {
            setTimeout(resolve, 1000, 'aaaa')}
        ).then(_=>console.log(this.str))
    }
}

• 如下写法可以保证执行顺序以及函数的闭包环境（直接写.then(a.load)会导致load函数中的this对象丢失）：

let a = new A()
let b = new A()
a.load().then( _ => b.load())
    .then(_=>console.log('asasas'))

使用async-await关键字代替.then的写法

async 关键字作用于function，从而在函数内可以使用await关键字标识异步方法

f_say = function(timeout, str) { //对应api
    return new Promise(function(resolve, reject) {setTimeout(resolve, timeout, str)} )
}
f_test1 = async function(timeout, str) { //对应api请求与处理函数
    const v = await f_say(timeout, str)
    console.log(v)
}
f_test = async function(){ //对应外部顺序业务
    await f_test1(1000, 'aaaa');
    console.log('!a!');
    await f_test1(100, 'bbbb');
    console.log('!b!');
    await f_test1(5000, 'cccc');
    console.log('!c!');
}
f_test()

可以保证f_test()函数中的各语句顺序执行