详细介绍promise

promise是什么？

说明：promise 是 ES6 引入的一种异步编程的解决方案，promise是一个构造函数，promise优化了回调地狱的写法，使代码更清晰点。

回调地狱：就是指事件层层嵌套在一起，需要一步步的去触发，嵌套越多，回调地狱就越复杂

代码演示：

	<button id="item">点我才能触发二号</button>
	<button id="item2">点我才能触发三号</button>
	<button id="item3">点我才能触发四号</button>
	<button id="item4">一直到最后一层结束</button>
	
	function $(id){
		return document.getElementById(id)
	}
	$('item').addEventListener('click',()=>{
		$('item2').addEventListener('click',()=>{
			$('item3').addEventListener('click',()=>{
				$('item4').addEventListener('click',()=>{
					alert('回调地狱结束')
				})
			})
		})
	})

promise对象及 then方法 和 catch方法

说明：创建一个promise对象需要传入两个参数分别代表成功（resolve）与失败（reject），promise对象的输出在**then( )**方法中

then方法

then方法：返回的是一个promise对象，对象的状态由回调函数的执行结果决定
注意：如果回调函数返回的是非promise类型的属性，状态是成功的，返回值就是成功对象的值

//创建一个promise对象,resolve表示传递成功的状态，reject表示传递失败的姿态
	let p = new Promise((resolve,reject)=>{
		//resolve('成功')
		reject('失败')
	})
	//then()方法接收两个参数，且两个参数都是函数，第一个函数代表成功的，第二个参数就是失败的
	p.then(data => console.log(data),err => console.log(err))

catch方法

可以说catch方法是then方法的别名，但catch方法用于捕获异常的，它只接收失败的信息

//创建一个promise对象
	const p = new Promise((resolve,reject)=>{
		reject('出错啦')
	})
	p.catch((err)=>console.log(err))

promise发送请求

原生 Ajax请求和 promise请求

//Ajax发送请求
	let xhr = new XMLHttpRequest()
	xhr.open('get','https://query.asilu.com/weather/baidu')
	xhr.responseType = 'json'
	xhr.send(null)
	xhr.onreadystatechange = ()=>{
		if(xhr.readyState == 4){
			if(xhr.status >=200 && xhr.status < 300){
				console.log(xhr.response)
			}else{
				console.log(xhr.status)
			}
		}
	}
	//promise发送请求
	let p = new Promise((resolve,reject)=>{
		let xhr2 = new XMLHttpRequest()
		xhr2.open('get','https://query.asilu.com/weather/baidu')
		xhr2.responseType = 'json'
		xhr2.send(null)
		xhr2.onreadyStatechange = ()=>{
			if(xhr.readyState == 4){
				if(xhr.status >= 200 && xhr.status < 300){
					resolve(xhr.response)
				}else{
					reject(xhr.status)
				}
			}
		}
	})
	p.then(data => console.log(data),err => console.log(err))

封装 GET 请求

封装一个get请求的方法

function getJSON(url) {
    return new Promise(function(resolve, reject) {
        var XHR = new XMLHttpRequest();
        XHR.open('GET', url, true);
        XHR.send();
 
        XHR.onreadystatechange = function() {
            if (XHR.readyState == 4) {
                if (XHR.status == 200) {
                    try {
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error(XHR.statusText));
                }
            }
        }
    })
}
 
getJSON(url).then(res => console.log(res));