1.1用promise来实现Ajax
const $ = (function(){
const ajax = function(url, async = false, type = ‘GET’){
const promise = new Promise(function(resolve, reject){
const handler = function(){
if(this.readyState !== 4){
return;
}
if(this.status === 200){
resolve(this.response);
}else{
reject(new Error(this.statusText));
}
}
const client = new XMLHttpRequest();
client.open(type, url);
client.onreadystatechange = handler;
client.responseType = ‘json’;
client.setRequestHeader(“Accept”, “application/json”);
client.send();
})
return promise;
}
return {
ajax
};
})()
调用方式：
$.ajax(“/posts.json”).then(function(json) {
console.log('Contents: ’ + json);
}, function(error) {
console.error(‘出错了’, error);
});
要注意的几个点：1.*then方法会返回一个新的promise，因此then方法应该写到原型链上。2.promise 的返回值或者抛出的err 会有传递现象。
例如：
new Promise(resolve=>resolve(8))
.then()
.catch()
.then(function(value) {
alert(value)
})
// 根据promise的定义和调用方式，可以先写出promise的数据结构
function Promise(executor){
const _this = this;
_this.status = ‘pending’;
_ths.data = undefined;
_this.onRejectedCallback = [];
_this.onResolvedCallback = [];
function resolve(value){
if(_this.status === ‘pending’){
_this.status = ‘resolved’;
_this.data = value;
for(let i=0;i<_this.onResolvedCallback.length;i++){
_this.onResolvedCallbacki;
}
}
}
function reject(reason){
if(_this.status === ‘pending’){
_this.status = ‘rejected’;
_this.data = reason;
for(let i=0;i<_this.onResolvedCallback.length;i++){
_this.onRejectedCallbacki;
}
}
}
try{
executor(resolve, reject);
}catch (e){
reject(e)
}
}
// then方法应该写在原型链上
Promise.prototype.then = function(onResolved, onRejected){
const self = this;
// 要判断onResolved 和 onRejected是不是方法
onResolved = typeof onResolved === ‘function’ ? onResolved : function(value) { return value }
onRejected = typeof onRejected === ‘function’ ? onRejected : function(reason) { return reason }
if(self.status === ‘resolved’){
return new Promise(function(resolve, reject){
try{
const resoult = onResolved(self.data);
if( resoult instanceof Promise ){ // 如果返回的是新的promise，那么用这个promise的痛恨方法
resoult.then(resolve, reject)
}
resolve(resoult) // 否则 直接讲返回值作为newPromise的结果
}.catch(e){
reject(e);
}
});
}
// 此处与前一个if块的逻辑几乎相同，区别在于所调用的是onRejected函数，就不再做过多解释
if (self.status === ‘rejected’) {
return new Promise(function(resolve, reject) {
try {
var resoult = onRejected(self.data)
if (resoult instanceof Promise) {
resoult.then(resolve, reject)
}
} catch (e) {
reject(e)
}
})
}
if(self.status === ‘pending’){
return new Promise(function(){});
}
if (self.status === ‘pending’) {
// 如果当前的Promise还处于pending状态，我们并不能确定调用onResolved还是onRejected，
// 只能等到Promise的状态确定后，才能确实如何处理。
// 所以我们需要把我们的两种情况的处理逻辑做为callback放入promise1(此处即this/self)的回调数组里
// 逻辑本身跟第一个if块内的几乎一致，此处不做过多解释
return Promise(function(resolve, reject) {
self.onResolvedCallback.push(function(value) {
文末
技术是没有终点的，也是学不完的，最重要的是活着、不秃。
零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。
最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。
高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。
技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。
拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
