ES6中的Promise javascriptes6前端

小编在项目中遇到这样的需求，就是很多个异步请求，下一个请求依赖上一个请求的请求结果，这个时候，在es5中的解决方案就是不停的在上一个请求成功的时候，根据返回值，再进行请求。倒是也能解决需求，但是写代码的时候，就会写成这样：大家还可以关注我的微信公众号，蜗牛全栈。

$.ajax({ url:"url1", type:"get", data:{para1:"data1"}, success:function(res1){ $.ajax({ url:"url2"+res1, type:"get", data:{para2:"data2"}, success:function(res2){ $.ajax({...}) } }) },error:function(){ } })

就先别说维护了，就是写的时候，一不小心少个小括号或者花括号，那也是一场灾难呐。后来小编了解到在es6中，称这种情况叫callback hell(回调深渊)。在es6中提供了Promise，可以很好的解决这种问题，当然了，在Vue中，在前后端分离项目中，也大量的使用了这种语法。
一、基本语法

let p = new Promise((resolve,reject) =>{ // 参数有两个，resolve是成功之后的回调函数，reject是失败之后的回调函数 setTimeout(() => { console.log("school") resolve() // 手动调用成功回调函数 },1000) }).then(() => { // 这个是成功之后执行的函数，不能省略 console.log("成功") },() => { // 这个是失败后的执行函数，可以省略 console.log("失败！") }) // school成功

二、异步之后的参数传递

let p = new Promise((resolve,reject) =>{ setTimeout(() => { console.log("school") resolve("成功") },1000) }).then((res) => { // 这个是成功之后执行的函数，不能省略，输出内容通过参数来传递 console.log(res) },() => { // 这个是失败后的执行函数，可以省略 console.log("失败！") }) // school 成功

【ES6中的Promise】三、实例：通过封装原生ajax来实现功能(目录结构：在当前文件下存在一个static文件夹，文件夹内有三个文件a.json、b.json、c.json。每个文件内是一个对象，分别为{a:"我是a"}、{b:"我是b"}、{c:"我是c"})
1、存在部分问题

// 封装ajax方法 function ajax(url, callback) { // 1、创建XMLHttpRequest对象 var xmlhttp if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest() } else { // 兼容早期浏览器 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP') } // 2、发送请求 xmlhttp.open('GET', url, true) xmlhttp.send() // 3、服务端响应 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { var obj = JSON.parse(xmlhttp.responseText) // console.log(obj) callback(obj) } } }new Promise((resolve,reject) => { ajax('static/a.json',res => { console.log(res) // {a:"我是a"} resolve() }) }).then(res => { console.log("a成功") new Promise((resolve,reject) => { ajax('static/b.json',res => { console.log(res) // {b:"我是b"} resolve() }) }) }).then(res => {// 这个时候就相当于空对象的then console.log("b成功") }) // {a:"我是a"} a成功b成功{b:"我是b"}

2、优化版本1

new Promise((resolve,reject) => { ajax('static/a.json',res => { console.log(res) // {a:"我是a"} resolve() }) }).then(res => { console.log("a成功") return new Promise((resolve,reject) => { ajax('static/b.json',res => { console.log(res) // {b:"我是b"} resolve() }) }) }).then(res => {// 这个时候就相当于空对象的then console.log("b成功") }) // {a:"我是a"} a成功{b:"我是b"}b成功

3、优化版本2：封装return new Promise

function getPromise(url){ return new Promise((resolve,reject) => { ajax(url,res => { resolve(res) }) }) }getPromise("static/a.json") .then(res => { console.log(res) return getPromise("static/b.json") }) .then(res => { console.log(res) return getPromise("static/b.json") }) .then(res => { console.log(res) }) // {a:"我是a"}{b:"我是b"}{c:"我是c"}