为什么要用promise处理ajax,为什么要使用promise

起因

大家都知道做前端开发的时候最让人头痛的就是处理异步请求的情况，在请求到的成功回调函数里继续写函数，长此以往形成了回调地狱。

function load() {

$.ajax({

url: 'xxx.com',

data: 'jsonp',

success: function(res) {

init(res, function(res) {

render(res, function(res) {

// 一层一层又一层

});

});

}

}

}

load();

复制代码

这样的代码看层级少了当然还是可以凑合看的，但是多起来的话，那就难以维护了，无论是开发者自身还是同事来接手项目，都是极其无奈的！还要我怎样，要怎样，怎样，样。

于是乎 出现了Promise

当年在听到关于Promise的报道的时候没有太多关注，只是知道是解决回调地狱问题的，一种异步请求解决方案而已。

后来在工作当中发现JQ也实现了相关的方法，上代码

$.get('xxx.php').done(function() {

alert('成功的回调'); // 相当于Promise的resolve()

});

复制代码

现在看来，真的和Promise差不多呢。那么我们回到今天的主角来

先介绍一下Promise的三种状态：

Pending 创建Promise对象时的初始状态

Fulfilled 成功时的状态

Rejected 失败时的状态

说完了状态直接上代码，我们得会用才行：

还以上面load函数的例子

// then方法是用的最多的了

// 按照then来执行成功和失败的回调函数

function load() {

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

$.ajax({

url: 'xxx.com',

data: 'jsonp',

success: function(res) {

resolve(res);

},

error: function(err) {

reject(err);

}

});

});

}

// 用一下

load().then(data => {

console.log(data); // 请求到的数据

console.log('请求数据成功');

}, err => {

console.log('请求失败');

});

复制代码

除了处理请求，Promise还可以写在普通的函数中

function init(options) {

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

if (options.id) {

console.log('你是唯一')

resolve(options.id);

} else {

console.log('不行，不行');

reject()

}

});

}

init({id: 110})

.then(id => {

console.log(id); // 110

let obj = {id, nickname: '左夕'};

return obj;

})

.then(other => {

console.log(other); // { id: 110, nickname: '左夕' }

});

复制代码

Promise.all和Promise.race有点类型

all是Promise的状态都为成功才表示成功

race是Promise的状态是有一个先成功的状态了，就表示成功

最近很火的axios其实就是调用了Promise，写法也是很相似的

由于它是第三方包，需要npm i axios安装一下

// 发个get请求

axios.get('user/', {

id,

username

}).then(res => {

console.log(res); // 成功

}).catch(err => {

console.log(err); // 失败

});

// 再来个post请求

axios.post('login/', {

username,

password

}).then(res => {

console.log(res); // 成功

}).catch(err => {

console.log(err); // 失败

});

// 也有all的操作

function getUser() {

return axios.get('/user');

}

function sendMsg() {

return axios.post('/info', {msg});

}

axios.all([getUser(), sendMsg()]).then(res => {})

复制代码

总结一下：Promise常用的就是这些了，then返回的也是一个Promise对象，所以可以继续调用.then方法。有说的不对的地方，还望指出。

那么接下来呢，就来实现一下Promise吧，用都用了不实现一下，也不够意思，点这里