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