promise是ES6新增的构造函数 作用是解决回调地狱的 它是一个容器 它有三种状态 第一个是pending进行中
第二个是fulfilled已完成
第三个是reject已失败
但是promise的默认状态是pending状态 一旦创建promise 里面的代码会立即执行 执行完成之后的状态变化有两种 调用resolve方法会从进行中变成已完成 调用reject会从进行中变成已失败 当promise的状态发生改变之后 .then方法调取成功的结果 .catch方法调用失败的结果
这下面是promise的语法
const 变量名 = new Promise( (resovle, reject) {
异步操作
进行中 -> 已成功 调用 resolve()
进行中 -> 已失败 调用reject()
} )
- 成功调用结果 -
变量名.then(res => {})
- 失败调用结果 -
变量名.catch(error => {})
有三种结果 pending fulfilled rejected
如何解决回调地狱
function NewPromise(url) {
// 创建一个promise实例对象
// resolve 成功 reject 失败
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('get','url资源地址')
xhr.send()
xhr.addEventListener('load', function() {
const data = JSON.parse(xhr.response)
resolve(data)
})
})
}
const NewPro1 = NewPromise('url资源地址')
const NewPro2 = NewPromise('url资源地址')
const NewPro3 = NewPromise('url资源地址')
// 调取成功结果
NewPro1.then(res => {
console.log(res) // NewPro1的结果
return NewPro2
}).then(res => {
console.log(res) // NewPro2的结果
return NewPro3
}).then(res => {
console.log(res) // NewPro3的结果
})
以上代码结果 没使用Promise之前用XML请求数据的结果是没有顺序的 但是调用Promise之后 打印台的是从上往下调取的结果 解决了异步