关于javascript:ES6中的Promise

小编在我的项目中遇到这样的需要，就是很多个异步申请，下一个申请依赖上一个申请的申请后果，这个时候，在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 胜利

三、实例：通过封装原生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"}