ES6的异步转换同步

ES6的异步转换同步

关于async/await 范例子 如何将异步代码看起来像同步代码一样

第一种方式
const delayer = t => new Promise(resolve => setTimeout(resolve, t))
async function timestast() {
console.log(1)
await delayer(1000)
console.log(2)
await delayer(1000)
console.log(3)
}
console.log(timestast()) 输出结果是 1 2 3

第二种方式
利用generator函数 他是ES6异步编程的解决方案 next()只会执行一次暂停 必须得加next.done为true的是时候才执行完毕
function run(gFun, …initvalues) {
let gen = gFun(…initvalues)
function next(data) {
let result = gen.next(data)
if (result.done) {
console.log(result)
return
}
result.value.then(data=>next(data))
}
next()
}
const delayer = t => new Promise(resolve => setTimeout(resolve, t))
function* start() {
console.log(1)
yield delayer(1000)
console.log(2)
yield delayer(1000)
console.log(3)

		}
		run(start)	

ES6的异步方法


```javascript
// ES6 Promise .then(方法) 基本用法
function runAsync1() {
				var p = new Promise(function(resolve, reject) {
					setTimeout(function() {
						console.log('异步执行1')
						resolve('成功才执行1')
						
					}, 1500)
				})
				return p
			}
			function runAsync2() {
				var p = new Promise(function(resolve, reject) {
					setTimeout(function() {
						console.log('异步执行2')
						resolve('成功才执行2')
						
					}, 1500)
				})
				return p
			}
			
			runAsync1().then(function(data){
				console.log(data)
				return runAsync2()
			}).then(function(data){
				console.log(data)
				return '自己定义数据'
			}).then(function(data){
				console.log(data)
			})

catch方法
function runAsync() {
var p = new Promise(function(resolve, reject) {
setInterval(function() {
var num = Math.ceil(Math.random() * 10);
if (num <= 5) {
resolve(num)
} else {
reject(num + ‘太大了’)
}

				}, 1500)
			})
			return p
		}
		runAsync().then(function(data) {console.log(data)}).catch(function(error){
		
				    console.log(error);
			})

	race的用法
	方法的效果实际上是「谁跑的慢,以谁为准执行回调」,那么相对的就有另一个方法「谁跑的快,以谁为准执行回调」,这就是race方法,这个词本来就是赛跑的意思。race的用法与all一样,我们把上面runAsync1的延时改为1秒来看一下:
//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}
 
//延时函数,用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}
 
Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

你可能感兴趣的:(js,javascript,vue,es6/es7)