zoukankan      html  css  js  c++  java
  • 对es6中Promise和async的理解

    Promise

    var promise = new Promise((resolve,reject)=>{
    	resolve(value);
    	//reject(value)
    });
    //promise的状态由内部是否执行resolve(),reject(),或者报错决定
    promise.then(value=>{
    	return value //等价于return Promise.resolve(value)  此时状态由pendding变为resolved
    	//return new Promise((resolve,reject)=>{})  如果此时内部未执行resolve(),reject(),或者报错,promise.then返回的对象就是pendding状态
    }) 
    //这个方法返回一个promise对象,这个对象和promise不相等,这个promise的状态,由return决定
    //如果return的是一个值,或者没有return(返回的是undefined),此时状态由pendding变为resolved
    
    
    var promise = new Promise((resolve,reject)=>{
    	console.log(1);
    	resolve();
    });
    promise.then(()=>{
    	return Promise.all[new Promise(
    		(resolve,reject)=>{
    			console.log(2)
    			resolve();
    		}
    	),new Promise(
    		(resolve,reject)=>{
    			console.log(3)
    			resolve();
    		}
    	)]
    }).then(()=>{
    	console.log(4)
    })
    promise.then(()=>console.log('end'))
    // 1 2 3 end 4   1 2 3 end返回的promise都是基于 promise的,4基于的是promise.then(),事件队列的排列顺序是1,2,3,end,4
    async function logInOrder(urls) {
      // 并发读取远程URL
      const textPromises = urls.map(url => {
        return function(){
          return new Promise((reslove)=>{
           setTimeout(()=>reslove(url),1000);
          });
        };
      });
      let reslt=[];
      // 按次序输出
      for (const textPromise of textPromises) {
        reslt.push(await textPromise());//此时才执行new Promise,执行定时器,await没有返回结果是不会执行后面的console.log的
        console.log(reslt);
      }
    }
    

    async

    async function logInOrder(urls) {
      // 并发读取远程URL
      const textPromises = urls.map(url => {
        return new Promise((reslove)=>{
           setTimeout(()=>reslove(url),1000);
          });
      });
      let reslt=[];
      // 按次序输出
      for (const textPromise of textPromises) {
        reslt.push(await textPromise);//在map(非常快)的时候定时器已经开启,await只是等待resolve的执行,恰好遍历的定时器时间一样,并行打印
        console.log(reslt);
      }
    }
    
    var promise = new Promise((resolve,reject)=>{
    	resolve(url1);
    });
    if(false){ //或者true,可以用promise赋值的方式将新的promise的结果传给下面的then
    	promise = promise.then(value=>{
    		return new Promise((resolve)=>{
    			resolve(url2)
    		})
    	})
    }
    promise.then((value)=>{
    
    })
    

    扩展我自己写的一个Promise.props方法

    // 直接在构造方法上定义静态方法
    Promise.props = function(obj) {
    	if (typeof obj !== 'object') return new Promise((resolve)=>resolve(obj));
      	let keys = Object.keys(obj);
    	return Promise.all(keys.map(item=>obj[item])).then((value) => {
        	let foo={};
    		value.forEach((v,i)=>foo[keys[i]] = v);
    		return foo
    	});
    }
    Promise.props({
    	a: new Promise((resolve) => {
    		setTimeout(() => resolve(123), 1000)
    	}),
    	b: new Promise((resolve) => {
    		setTimeout(() => resolve(456), 1000)
    	})
    }).then(value => console.log(value.a, value.b))
    
  • 相关阅读:
    js forEach方法
    day1总结
    jupyter notebook
    java_13网络编程
    原生 input radio 优化
    JQ 获取 input file 图片 显示在对应位置
    math.js 使用
    前端优化
    文字动态颜色变化效果
    谷歌,火狐隐藏滚动条
  • 原文地址:https://www.cnblogs.com/yangwang12345/p/7729474.html
Copyright © 2011-2022 走看看