作用
为了解决异步API回调地狱的问题
之前其实不是很理解promise的模型。
语法
1.需要传入一个函数作为参数,这个函数里面接受二个函数
2.resolve和reject的作用是改变状态,状态一旦改变就不可以更改
3.一旦状态更改,在then的 方法里面就会回调第一个函数(当执行resolve函数的时候)
4.这个函数是我们自己写的
单个的异步API
`function cc() {
return new Promise(function (resolve, rejects) {
setTimeout(function () {
console.log(11);
resolve('123')
})
})
}
//我们在then里面要传入2个参数,这2个参数是函数体
//当为resolve的时候会promise会回调第一个函数
//同时通过内部的结构,将resolve的结果返回出来
//而不是我以前以为的resolve就是then的第一个函数!
cc().then(function (res) {
console.log(res);
})
多个异步操作
then的使用
原理:then会把返回的结果传到第二个函数,作为参数。
如果是return基本数据类型
```cc().then(res=>{
return 1111
}).then(res=>{
console.log(res);//1111
})```
return的是promise对象
会把promise对象执行的结果作为参数,传到第二个函数。
cc().then(res=>{ return cc1() }).then(res=>{ console.log(res);//222 cc1()的执行结果作为参数 })
也可以使用箭头函数简化
```cc().then(res=>cc1()).then(res=>{
console.log(res);//也可以通过箭头函数写的更加简单
})```
原理:then()方法返回的是一个promise对象,所以我们可以链式.then()达到多个调用的目的。
function cc() {
return new Promise(function (resolve, rejects) {
setTimeout(function () {
console.log(11);
resolve('111')
})
})
}
function cc1() {
return new Promise(function (resolve, rejects) {
setTimeout(function () {
console.log(22);
resolve('222')
})
})
}
//then返回的是一个promise,可以持续.then()
//在第一个resolve return不是promise对象,那么会把这个作为第二个then的参数
//如果return的是promise对象,那么第二个then就会根据返回的promise对象的状态决定是resolve还是reject
//同时他也会将新promise对象的结果作为参数输出
cc().then(function (res) {
console.log(res);
return cc1()
}).then(res=>{
console.log(res);
})
手写简单版的promise
function Promise(executor) {
let self = this;
self.status = 'pending'
self.success = undefined;
self.error = undefined;
function resolve(success) {
if (self.status === 'pending') {
self.status = 'success'
self.success = success
}
}
function reject(error) {
if (self.status === 'pending') {
self.status = 'error'
self.error = error
}
}
executor(resolve, reject)
}
Promise.prototype.then = function (onResolve, onReject) {
let self = this;
if (self.status === 'success') {
onResolve(self.success)
}
if (self.status === 'error') {
onReject(self.error)
}
}
function cc() {
return new Promise((resolve, reject) => {
resolve('123')
})
}
cc().then(res => {
console.log(res);
})```