天天看點

promise的基本用法

promise的用法

promise是一個構造函數,自身有all,resolve,reject等方法,原型上有then,catch等方法。并且它new的執行個體對象特包含這些方法。通常将他包在一個函數中然後傳回一個promise對象。

function hins(){
	let name = new Promise(function(resolve,reject){
	setTimeout(function(){
	console.log('異步執行完成');
	resolve('hinschueng')
	},1000);
});
	return name
}
hins().then(function(data){
console.log(data)
})
           

promise接收一個參數,是函數,并且傳入兩個參數:resolve,reject,分别表示異步操作執行成功後的回調函數和異步操作執行失敗後的回調函數。從表面上看,Promise可以簡化層層回調的寫法,即解決回調地獄的問題,但實質上,Promise的精髓是“狀态”,用維護狀态、傳遞狀态的方式來使得回調函數能夠及時調用。正确用法如下:

function Hins(){
   				var name = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log('異步執行完成1');
                    resolve('hinschueng');
                },1000);
            });
            return name
        }
        function Hins1(){
            var name = new Promise(resolve =>{
                setTimeout(function(){
                    console.log('異步執行完成2');
                    resolve('yin')
                },2000)     
            });
            return name
        };
        function Hins2(){
            var name = new Promise(resolve => {
                setTimeout(function(){
                    console.log('異步執行完成3');
                    resolve('jiao')
                },3000);
            });
            return name
        }
        Hins()
        .then(function(data){
            console.log(data);
            return Hins1()
        })
        .then(data =>{
            console.log(data);
            return Hins2()
        })
        .then(data =>{
            console.log(data);
        })
           

reject和catch

reject的作用就是把Promise的狀态變成"rejected",然後在then中執行“失敗”的回調函數。

function Num(){
	var p = new Promise((resolve,reject) => {
		var n=2;
		if(n>3){
		resolve(n)
		}else{
		reject('數字太小了')
		};
		});
	return p
	}
	Num()
	.then(data => {
	console.log(data)
	},
	reason =>{
	console.log(reason)
	})
           

catch的效果是和寫在then裡第二個參數一樣,但是它有另一個作用:在執行resolve的回調函數時,如果抛出錯誤,不會報錯卡死js,而是進入catch方法中。效果如下:

Num()
.then(data =>{
console.log(data);
console.log(somedata);//這個somedata沒有定義
})
.catch(reason =>{
console.log('我被執行了')
console.log(reason)
})