promise的产生的由来
引入概念 :回调地狱
像下方这种在ajax中需要再次发送ajax的需求,就会产生回调地狱
$.ajax({
url: "http://kumanxuan1.f3322.net:8809/destinations/hotRegion",
type: "GET",
success(res) {
$.ajax({
url: "http://kumanxuan1.f3322.net:8809/strategies/themes",
type: "GET",
success(res) {
$.ajax({
url: "http://kumanxuan1.f3322.net:8809/travels/query",
type: "GET",
success(res) {
}
})
}
})
}
})
使用起来及其复杂,难用
故promise的诞生就是为了解决掉回调地狱
promise的概念
语法: promise( function ( ){ } )------promise内部需要加一个回调函数
promise 是内置的构造函数
构造函数一般搭配new使用
//例如:var obj =new Object(), new Promise() //object和promise都是构造函数
promise的两个参数与三个状态
回调函数也有两个参数----也是一个函数
-
resolve 确定
-
reject 拒绝
var p =new Promise(function(resolve, reject){
resolve();
reject();
})
console.log(p);
初始默认状态:pending 未决定的
resolve调用之后 pending 状态改变为 fulfilled 状态 -----成功状态
reject调用之后 pending 状态改变为 reject 状态 -----失败状态
promise的特点
1.一旦状态被改变过一次,状态就会产生凝固,后面就再也无法改变状态,
2.状态不会受外界影响
promise的基本语法
注"此处的开关模拟的是ajax的请求成功或者失败
var flag = true
var p = new Promise((resolve, reject) => {
if (flag) {
resolve("产生成功的信息回调")
} else {
reject("产生错误的信息回调")
}
})
那么要如何处理resolve和reject呢
使用.then函数可以在promise 外部处理请求的结果
p.then(res => { //处理resolve的调用 .then会处理成功后的数据
console.log(res); //成功的返回数据 res只是一个形参
})
p.catch(error => { //处理reject的调用 .catch会处理成功后的数据
console.log(error); //失败的返回数据
})
promise解决回调地狱(简化过的)
封装一个函数来使得ajax 参数可以重复调用,
function sentAjax(url) {
return Promise((resolve, reject) => {
$.ajax({
url,
type: "get",
success(res) {
resolve(url);
},
error(err) {
reject(err);
}
})
})
}
let p1 = sentAjax("http://kumanxuan1.f3322.net:8809/destinations/hotRegion")
let p2 = setPromiseAjax("http://kumanxuan1.f3322.net:8809/strategies/themes")
let p3 = setPromiseAjax("http://kumanxuan1.f3322.net:8809/travels/query")
然后在外部使用then来捕获成功处理的函数
使用链式编程来使得一步一步发送
重点:虽然.then.catch 方法是异步程序 但promise 内部是同步的
p1.then(res => {
console.log(res);
return p2 //因为此处标记了return 把p2给抛出才能使得下方的第二个then能和接收到值
}).then(res => { //第二个then作用域上一个then返回的对象
console.log(res);
return p3
}).then(res => {
console.log(res);
})
promise的2个使用方法
//场景:页面进来后,发送三个请求,统一处理所有请求
//需求:统一处理三个请求
前部js数据
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("成功1")
}, 3000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("成功2")
}, 200)
})
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("成功3")
}, 40)
})
promise.all方法
promise.a;ll方法类似于&&(与)的相同语法
当内部所有请求都成功时,最终的结果才是成功 then 内部会得到一个数组包含所有请求成功的结果
但一旦发现其中一个结果失败,总的结果就会变成失败,catch内部获取到响应速度最快返回的失败结果
let p = Promise.all([p1, p2, p3])
promise.race方法
谁最快就得到谁,无论结果是成功还是失败
let p =promise.race([p1,p2,p3])标签：resolve,res,JS,ajax,promise,reject,new,方法 From： https://www.cnblogs.com/Dollom/p/16795226.html