关键字: 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写法
- 一般写法
- Promise对象在new 的时候接收
function类型的参数 - .then函数接收一个
function类型的参数，该function需要返回一个Promise对象 - .then中的回调函数如果有返回值，会作为下一个.then回调函数的输入；如果没有返回值，则默认返回
undefined
- 循环内的使用
- 先执行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()函数中的各语句顺序执行
