共计 2413 个字符,预计需要花费 7 分钟才能阅读完成。
小编在我的项目中遇到这样的需要,就是很多个异步申请,下一个申请依赖上一个申请的申请后果,这个时候,在 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"}
正文完