Promise的含义
Promise 是异步编程的一种解决方案。
它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise
个人理解
一个js原生对象，为了使代码更易读，避免回调嵌套。以同步编程的形式来解决异步编程
promise实现原理
promise雏形
function Promise(fn) {
var value = null,
callbacks = []; //callbacks为数组，因为可能同时有很多个回调
this.then = function (onFulfilled) { //onFulfilled，then(要注册的回调)
callbacks.push(onFulfilled);
return this; //实现链式调用
};
function resolve(value) {
callbacks.forEach(function (callback) {
callback(value);
});
}
fn(resolve); //当一步操作执行成功后，用户会调用resolve方法,真正执行的操作是将callbacks队列中的回调一一执行
}
function getUserId() {
return new Promise(function (resolve) {
resolve(9876);
});
}
getUserId().then(function (id) {
// 一些处理
});
加入延时机制
function resolve(value) {
setTimeout(function() {
callbacks.forEach(function (callback) {
callback(value);
});
}, 0)
}
Promises/A+规范明确要求回调需要通过异步方式执行，用以保证一致可靠的执行顺序
通过setTimeout机制，将resolve中执行回调的逻辑放置到JS任务队列末尾
问题：Promise异步操作成功这之后调用的then注册的回调就再也不会执行,如何解决？
状态机制
Promises/A+规范中的2.1Promise States中明确规定了，pending可以转化为fulfilled或rejected并且只能转化一次
function Promise(fn) {
var state = 'pending',
value = null,
callbacks = [];
this.then = function (onFulfilled) {
if (state === 'pending') {
callbacks.push(onFulfilled);
return this;
}
onFulfilled(value);
return this;
};
function resolve(newValue) {
value = newValue;
state = 'fulfilled';
setTimeout(function () {
callbacks.forEach(function (callback) {
callback(value);
});
}, 0);
}
fn(resolve);
}
三种状态
1.pending:等待
2.fulfilled:执行
3.rejected:失败
状态改变
Promise对象的状态改变只有两种可能：
1.pending ——> fulfilled
2.pending ——> rejected
// 方法1
let promise = new Promise ( (resolve, reject) => {
if ( success ) {
resolve(res) // pending ——> resolved 参数将传递给对应的回调方法
} else {
reject(err) // pending ——> rejectd
}
} )
// 方法2
function promise () {
return new Promise ( function (resolve, reject) {
if ( success ) {
resolve(res)
} else {
reject(err)
}
} )
}
Then方法
Promise对象中的then方法，可以接收构造函数中处理的状态变化，并分别对应执行。then方法有2个参数，第一个函数接收resolved状态的执行，第二个参数接收reject状态的执行
myFirstPromise.then(
(successMessage) => {
// successMessage is whatever we passed in the resolve(...) function above.
// It doesn't have to be a string, but if it is only a succeed message, it probably will be.
console.log(“这是resolve的结果! " + successMessage);
},
(errorMessage) => {
// successMessage is whatever we passed in the resolve(...) function above.
// It doesn't have to be a string, but if it is only a succeed message, it probably will be.
console.log("这是reject的结果!! " + errorMessage);
});
then方法的执行结果也会返回一个Promise对象。因此我们可以进行then的链式执行，这也是解决回调地狱的主要方式。
myFirstPromise
.then((successMessage) => {
console.log(successMessage);
})
.then(null,(errorMessage) => {
console.log(errorMessage);
});
then(null,()=>{})等同于catch(()=>{})
myFirstPromise
.then((successMessage) => {
console.log("这是! " + successMessage);
})
.catch((successMessage) => {
console.log("这是! " + successMessage);
});
promise简单封装一个get请求
var url = ‘https://promise.com/case';
// 封装一个get请求的方法
function getJSON(url) {
return new Promise(function(resolve, reject) {
var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();
XHR.onreadystatechange = function() {
if (XHR.readyState == 4) {
if (XHR.status == 200) {
try {
var response = JSON.parse(XHR.responseText);
resolve(response);
} catch (e) {
reject(e);
}
} else {
reject(new Error(XHR.statusText));
}
}
}
})
}
getJSON(url).then(resp => console.log(resp)).catch(err => console.log(err));
两个常用的用promoise封装的XMLHttpRequest库
fetch
fetch优点
1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
3.更加底层，提供的API丰富（request, response）
4.脱离了XHR，是ES规范里新的实现方式
fetch缺点
1.fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
2.fetch默认不会带cookie，需要添加配置项
3.fetch不支持abort，不支持超时控制，使用setTimeout及4.Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
5.fetch没有办法原生监测请求的进度，而XHR可以
case:
const options = {
method:"get", //HTTP请求方法，默认为GET
body:"请求参数", //HTTP的请求参数
headers:{}, //HTTP的请求头，默认为{}
credentials:"omit" //凭证，默认为omit,忽略的意思，也就是不带cookie;
};
const url = 'http://localhost/flowers.jpg';
fetch(url, options).then((response) => {
// handle HTTP response
}, (error) => {
// handle network error
})
Axios
axios的优点
1.从 node.js 创建 http 请求
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
暂未发现axios缺点，个人推荐使用。