Promise
Promise用来解决异步嵌套问题
Promise是JS内置的构造函数 参数是一个回调函数 回调函数有两个参数:resolve(表示执行成功的回调) reject(表示执行失败的回调)
then方法:Promise类原型上的方法
then有两个参数 第一个是成功回调resolve 第二个参数表示失败的回调reject
promise有三种状态 第一种是pending(等待状态)
第二种是fulfilled(成功的状态)
第三种是rejected(失败的状态)
let p = new Promise(function (resolve,reject) { window.setTimeout(function () { // resolve('success'); 执行成功的回调 reject();//失败的回调 }, 1000) }) p.then(function (data) { alert(data); },function () { alert('error'); })
then方法的返回值 Promise类的实例,所以可以继续调用then方法
let p = new Promise(function (resolve,reject) { window.setTimeout(function () { resolve('success'); //执行成功的回调 // reject();//失败的回调 }, 1000) }); p.then(function (data) { alert(data); // return data;//return是个数值,则会把return的值做为参数传给下一个then的成功回调函数 return new Promise(function (resolve,reject) {//return是个promise对象下个then走哪个回调函数 是由promise的状态决定的 window.setTimeout(function () { // reject('失败'); resolve('成功'); },1000) }) },function () { // alert('error1'); throw new Error('error1');//手动抛出异常才会运行第二个then的失败回调 否则都是成功的回调 }).then(function (data) { alert(data) },function (data) { alert(data) })
格式化提交的json数据
https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list
![]()
https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info
![]()
https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/add
postman:调试接口
处理异步并发的问题 :
Promise.all异步并发问题 异步逻辑都处理完后再做其他事情
/*Promise.all异步并发问题 异步逻辑都处理完后再做其他事情*/ let p1 = new Promise(function (resolve,reject) { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info', type: 'get', dataType: 'json', success: resolve, error: reject }) }); let p2 = new Promise(function (resolve,reject) { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list', type: 'get', dataType: 'json', success: resolve, error: reject }) }); Promise.all([p1, p2]).then(function (res) { let [info,list] = res; console.log(info, list); })
Promise.race 有多个异步操作同时进行 以先返回的为这次异步操作的结果
/*Promise.race 有多个异步操作同时进行 以先返回的为这次异步操作的结果*/ let p1 = new Promise(function (resolve,reject) { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info', type: 'get', dataType: 'json', success: resolve, error: reject }) }); let p2 = new Promise(function (resolve,reject) { $.ajax({ url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list', type: 'get', dataType: 'json', success: resolve, error: reject }) }); //先返回的状态决定是成功状态还是失败状态 Promise.race([p1, p2]).then(function (res) { console.log(res);//先返回的异步的结果 },function (err) { console.log(err); })