JS中的promise()方法

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])