ES6中的Promise
Posted 飞鹰
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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"}
以上是关于ES6中的Promise的主要内容,如果未能解决你的问题,请参考以下文章