promise跟ajax区别,深入理解Promise/ajax
Promise 对象特点
对象的状态不受外界影响。 Promise对象代表一个异步操作， 有三种状态： pending( 进行中)、 fulfilled( 已成功) 和rejected( 已失败)。 只有异步操作的结果， 可以决定当前是哪一种状态， 任何其他操作都无法改变这个状态。
一旦状态改变， 就不会再变， 任何时候都可以得到这个结果。 Promise对象的状态改变， 只有两种可能： 从pending变为fulfilled和从pending变为rejected。 只要这两种情况发生， 状态就凝固了， 不会再变了， 会一直保持这个结果， 这时就称为 resolved( 已定型)。 如果改变已经发生了， 你再对Promise对象添加回调函数， 也会立即得到这个结果。
Promise缺点
无法取消promise, 一旦新建它会立即执行， 无法中途取消.
如果不设置回调函数， promise内部抛出的错误， 不会反应到外部.
当处于pending 状态时， 无法得知目前进展到那一阶段.
静态方法
Promise.reslove()
将现有对象转换为Promise对象
如果参数是promise实例，则直接返回这个实例
如果参数是thenabled对象(有then方法的对象)，则先将其转换为promise对象，然后立即执行这个对象的then方法
如果参数是个原始值，则返回一个promise对象，状态为resolved，这个原始值会传递给回调
没有参数，直接返回一个resolved的Promise对象
Promise.reject()
同上，不同的是返回的promise对象的状态为rejected
Promise.all()
接收一个Promise实例的数组或具有Iterator接口的对象
如果元素不是Promise对象，则使用Promise.resolve转成Promise对象
如果全部成功，状态变为resolved，返回值将组成一个数组传给回调
只要有一个失败，状态就变为rejected，返回值将直接传递给回调
all() 的返回值也是新的Promise对象
Promise.race()
只要有一个Promise实例率先发生变化(无论是状态变成resolved还是rejected)都触发then中的回调，返回值将传递给回调
race()的返回值也是新的Promise对象
代码用法和误区
常见用法
promise 的神奇之处在于让我们能够在回调函数里面使用 return 和 throw
如果没有任何返回，将默认返回 undefinedloadAsync1()
.then(function(data1){
return loadAsync2(data1)
})
.then(function(data2){
return loadAsync3(data2)
})
.then(okFn, failFn)
************************************
loadAsync1()
.then(function(data1){
loadAsync2(data1)
})
.then(function(data2){
loadAsync3(data2)
})
.then(res=>console.log(res))
复制代码
catch()与then(null, fn)
不等同情况,此时catch捕获并不是ajaxLoad1错误 而是ajaxLoad2的错误。**看场景有时要结合起来使用**
```js
ajaxLoad1()
.then(res=>{ return ajaxLoad2() })
.catch(err=> console.log(err))
----------------------
// 结合使用
ajaxLoad1()
.then(res=>{ return ajaxLoad2() }, err=>console.log(err))
.catch(err=> console.log(err))
```
复制代码
穿透 Fall Through
如果then或catch接收的不是函数，那么就会发生穿透行为，所以在应用过程中，应该保证then接收到的参数始终是一个函数
new Promise(resolve=>resolve(8))
.then(1)
.catch(null)
.then(Promise.resolve(9))
.then(res=> console.log(res))
// 8
复制代码
用Promise实现一个Ajax操作
// 0 未初始化未调用open
// 1.启动 调用open 未调用 send
// 2. 发送 已调用send() 但是未响应
// 3. 接收 已经接收部分响应数据
// 4.完成 完成全部数据响应
const ajax = function (params){
if (!params.url) return
const promise = new Promise((resolve, reject) => {
const handler = function (){
if (this.readyState !== 4) return
if (this.status == 200) {
try {
let resonse = JSON.parse(this.responseText)
resolve(resonse)
} catch (error) {
reject(error)
}
} else {
reject(new Error(this.statusText))
}
}
const xhr = new XMLHttpRequest()
if (params.method.toLowerCase() == 'get') {
xhr.open('get', url + '?' + formatParams(params.data));
xhr.send()
} else {
xhr.open('post', url);
xhr.send(JSON.stringify(params.data));
}
xhr.onreadystatechange = handler
xhr.responseType = 'json'
xhr.setRequestHeader('Accept', 'application/json');
})
return promise
function formatParams(obj){
if (!data) return
var arr = []
for (let i in obj) {
arr.push(`${encodeURIComponent(i)}=${encodeURIComponent(obj[i])}`)
}
return arr.join('&')
}
}
复制代码
Promise常见问题
reject 和 catch 的区别
- promise.then(onFulfilled, onRejected)
在onFulfilled中发生异常的话，在onRejected中是捕获不到这个异常的。
- promise.then(onFulfilled).catch(onRejected)
.then中产生的异常能在.catch中捕获
复制代码
如果在then中抛错，而没有对错误进行处理(即catch)，那么会一直保持reject状态，直到catch了错误
```JS
/* 例4.1 */
function taskA() {
console.log(x);
console.log("Task A");
}
function taskB() {
console.log("Task B");
}
function onRejected(error) {
console.log("Catch Error: A or B", error);
}
function finalTask() {
console.log("Final Task");
}
var promise = Promise.resolve();
promise
.then(taskA) // 抛出错误，不继续Task A”
.then(taskB) // .then没有捕获A抛出的错，不打印 “Task B”
.catch(onRejected) // 捕获了A的错，打印错误信息
.then(finalTask); // 错误已经被捕获，执行resolve
-------output-------
Catch Error: A or B,ReferenceError: x is not defined
Final Task
```
复制代码
每次调用then都会返回一个新创建的promise对象，而then内部只是返回的数据
```JS
//方法1：对同一个promise对象同时调用 then 方法
var p1 = new Promise(function (resolve) {
resolve(100);
});
p1.then(function (value) {
return value * 2;
});
p1.then(function (value) {
return value * 2;
});
p1.then(function (value) {
console.log("finally: " + value);
});
-------output-------
finally: 100
------------------------------------------------------
//方法2：对 then 进行 promise chain 方式进行调用
var p2 = new Promise(function (resolve) {
resolve(100);
});
p2.then(function (value) {
return value * 2;
}).then(function (value) {
return value * 2;
}).then(function (value) {
console.log("finally: " + value);
});
-------output-------
finally: 400
```
复制代码
在异步回调中抛错，不会被catch到
```JS
// Errors thrown inside asynchronous functions will act like uncaught errors
var promise = new Promise(function(resolve, reject) {
setTimeout(function() {
throw 'Uncaught Exception!';
}, 1000);
});
promise.catch(function(e) {
console.log(e); //This is never called
});
```复制代码