promise初使用

promise是ES6的新特性，代表了一个异步操作的过程，对于大神来说理解这个确实非常简单，本文也只是博主自己和大家分享一下当初使用promise的一些经验，希望能通过自己的叙述，让一些不理解的人可以更能了解并且使用promise，博主自己使用了以后，也是确实感觉非常的有用。

promise其实就是一个对象，准确说是一个类，有自己的方法来操作，而promise出现的作用其实就是为了解决所谓的回调地域的问题，博主开始也是不理解什么叫做回调地狱，直到后来自己做公司项目的时候，遇到了这样的情况，才深刻的理解了promise以及回调地狱。

简单点说，就是我们在使用ajax请求操作的时候，就是一个异步操作，即我们进行异步操作的时候，需要根据操作的结果再次进行异步操作，一次两次还好，如果要嵌套很多的话，那么代码就像这样：

const Mock = require('mockjs');
const $ = require('jquery');

function resolveParams(str){
	var obj = {};
	var arr = str.split('&');
	$.each(arr,function(i,val){
		var key = arr[i].substring(0,arr[i].indexOf('='));
		var values = arr[i].substring(arr[i].indexOf('=') + 1);
	 	obj[key] = values;
	})
	return obj;
}
//模拟数据接口
Mock.mock('datajson.php','post',function(option){
	if(resolveParams(option.body).password === '123'){
		return 2;
	}else{
		return new Error('错啦');
	}
});

Mock.mock('datajsonp.php','post',function(option){
	if(resolveParams(option.body).password === '2'){
		return 123;
	}else{
		return new Error('错啦');
	}
});

//地狱回调
$.post('datajson.php',{id: 'qiugu',password: 123},function(res){
		console.log(res);
		$.post('datajsonp.php',{id:'qiugu',password: res},function(res){
			console.log(res);
			$.post('datajson.php',{id: 'qiugu',password: res},function(res){
				console.log(res);
				$.post('datajsonp.php',{id: 'qiugu',password: res},function(res){
					console.log(res);
				})
			})
		})
	});

这样就会形成地狱回调，即代码看起来非常的混乱，一旦嵌套越多，无论是维护还是阅读，都是比较困难的，因此ES6就出现了promise的方法，可以将异步操作封装进去，然后用then方法来调用，看起来就像这样：

let promise = new Promise((resolve,reject) => {
	$.post('datajson.php',{id: 'qiugu',password: 123},function(res){
		resolve(res);
		console.log(res);
	});
})

promise.then((value) => {
	console.log(value);
	return new Promise((resolve,reject) => {
		$.post('datajsonp.php',{id: 'qiugu',password: value},function(res){
			console.log(res);
			resolve(res);
		});
	})
}).then((value) => {
	console.log(value);
	return value;
}).then((value) => {
	console.log(value);
})

每一层的嵌套都是清晰可见的，非常的一目了然，promise既然是一个对象，那么我们首先生成实例，即new Promise来生成，他会接受两个参数，resolve，reject，分别是操作成功和操作失败的函数，同时这两个函数也接受一个参数，resolve接受的就是异步操作的结果作为参数，注意这里！！！！resolve最大的作用就是可以将异步操作的结果传递出去，这样我们就能在then的回调函数中接受这个结果，如果后面还有嵌套的操作，我们就可以基于这个结果，继续进行操作了，这点也是非常重要的，同时，如果在then方法中，还是进行异步操作的话，那就还是需要将异步操作放进promise中，然后return出去，这样下一个then方法才能接受到异步操作的结果，如果then方法中不是异步操作的话，或者不需要异步操作，那就可以直接写逻辑了，这里注意就是异步操作需要放进promise中，然后resolve操作的结果才可以。

之后说说reject，博主查了很多资料，一般来说reject可以用来捕获异步操作的错误，还有一种就是可以在最后一个then方法后面，用catch的方法也能捕获错误，博主也是尝试了一下，但是还是显示报错，对这一部分自己也还是没有能弄懂，如果有明白的同学也是可以告诉博主的啦

let promise = new Promise((resolve,reject) => {
	//这里请求的地址少写一个j
	$.post('datason.php',{id: 'qiugu',password: 123},function(res){
		resolve(res);
		console.log(res);
	});
})

promise.then((value) => {
	console.log(value);
	return new Promise((resolve,reject) => {
		$.post('datajsonp.php',{id: 'qiugu',password: value},function(res){
			console.log(res);
			resolve(res);
		});
	})
}).then((value) => {
	console.log(value);
	return value;
}).then((value) => {
	console.log(value);
}).catch((error) => {
	console.log('error' + ' ' + error);
})

这个是请求地址写错的话，浏览器还是报错了，当然也是有可能自己对于捕捉错误的理解有误，后续自己也是会继续关注，也是给自己留一个解惑的作业。

猜你喜欢