ES6 回调地狱的拯救者 Promise

Promise对象是一个构造函数，该函数有两个参数：

• resolve：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去

• reject：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

const p = new Promise(function(resolve,reject){

console.log(‘one’);

resolve(‘three’);

});

p.then(resolve => {

console.log(resolve);

}, err => {

console.log(err);

});

console.log(‘tow’);

• Promise 新建后就会立即执行

then方法

Promise实例生成以后，可以用``分别指定resolved状态和rejected状态的回调函数

该方法的两个参数：

1. 回调函数是Promise对象的状态变为resolved时调用（必须）

2. 回调函数是Promise对象的状态变为rejected时调用（可选）

回到顶部 目录

Promise对象实现的 Ajax 操作

---

const ajax = function(url) {

return new Promise(function(resolve, reject){

const xml = new XMLHttpRequest();

xml.open(“GET”, url, true);

xml.onreadystatechange = function() {

if (this.readyState !== 4) {

return;

}

if (this.status === 200) {

resolve(this.responseText);

} else {

reject(new Error(this.statusText));

}

};

xml.send();

});

};

ajax(“data.json”).then(res => {

console.log(res);

return res;

}).catch(err => {

console.log(err);

})

.then(function(res) {

console.log(res);

})

Promise对象实现的图片加载

---

const getImage = function (path) {

return new Promise((resolve, reject) => {

const img = new Image();

img.onload = resolve;

img.onerror = reject;

img.src = path;

});

};

回到顶部 目录

方法

---

| 方法 | 用途 |

| :-- | :-- |

| Promise.prototype.then(resolved[,rejected]) | 为Promise实例添加状态改变时的回调函数 |

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。