promise是什么/怎么用

概念:promise是异步编程的一种解决方案.

        (就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数)

异步:之前实现异步操作的方式.①回调函数②事件触发

作用:解决异步操作问题.

特点:(1)对象的状态不受外界影响.promise对象代表一个异步操作,

            有三种状态: pending(进行中).fulfilled(已成功),rejected(已失败)

            只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.

        (2)对象的状态,一旦改变,就不会再变,任何时候都可以得到这个结果.

             (promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pendig变为rejected.)

基本用法:

(1)通过new promise对象可以创建promise实例

  const promise = new Promise(function (resolve,reject){  })

(2)参数说明:promise对象接收一个函数做参数,并且这个函数的参数分别是resolve和reject,它们是两个函数,由javascript引擎提供

(3)resolve函数的作用.在异步操作成功时调用,并将异步操作的结果,作为参数传递出去

(4)reject函数的作用.在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去

说明:promise实例生成以后,可以用then方法,分别指定成功和失败的回调函数

分别利用回调函数和promise模拟1秒通信(在执行完打印'hello',1s再打印'world')

①回调函数发法:   function ajax (callback){

                               console.log('hello')

                              setTimeout(function(){

                                 callback&&callback()

                              },1000)

                           }

                          ajax(function(){

                           console.log('world')

                     }

②promise方法       function   ajax(){

                               console.log('hello')

                             return new Promise(function(resolve,reject){

                                   setTimeout(function(){

                                        resolve()

                                  },1000)

                                })

                           }

                             ajax().then(function(){

                                 console.log('world')

                          })

.then()是promise实例的一个方法,表示要执行的下一步操作

promise实例的方法

(1)then(参数1,参数2)

作用:为promise实例添加状态改变时的回调函数

        参数1是成功的回调函数,参数2是失败的回调函数

        返回值:then方法返回的是一个新的promise实例,.then方法可以采用链式操作

(2)catch()

作用:指定发生错误时的回调函数,作用等同于then方法的第二个参数

let ajax =  function(num){

return new Promise(resolve,reject)=>{

       if(num>5){

           resolve(num)

       }else{

             throw new Error('出错了')

       }

  })

}

ajax(2).then(function(num){

console.log(num)

}).catch(function(err){

console.log(err)

}

Promise风格的ajax

                    function promiseAjax(json){

                              let url = json.url

                              let type = json.type || 'get'

                              let parmas = json.data || {}

                              let str = ''

                              for(let k in parmas){

                                str += k+'='+parmas[k]+'&'

                             }

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

                                    let xhr = new XMLHttpRequest()

                                    if (type.toLowerCase()==='get'){

                                        xhr.open('get',`${url}?${str}time=${Data.now()}`,true)

                                        xhr.send()

                                   }else if(type.toLowerCase()==='post'{

                                    xhr.open('post',url,true)

                                    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

                                    xhr.send(str.substring(0,str.lastIndexOf('&')))  

                                 }

                                  xhr.onreadystatechange = function (){

                                     if(this.readyState===4){

                                        if(this.status>=200 && this.status<300){

                                                resolve(JSON.parse(this.reponseText)

                                           }else{

                                             let error = new Error()

                                             error.status = this.status

                                              reject(error)

                                          }

                                     }

                                   }

                         })

                   }

Promise的类(高级)方法

(1)promise.all()

将多个promise实例,包装成一个新的promise实例,简单的来说就是多个异步操作都成功则才执行成功的回调,否则执行失败的回调

参数说明: 接收一个数组为参数,数组的每一项都是promise实例

(2)promise.race()

竞赛,将多个promise实例,包装成一个新的promise实例,只要有一个实例率先改变状态,promise的状态就跟着改变

参数说明: 接收一个数组作为参数,数组的每一项都是promise实例

例如:请求三张网络图片有一张加载完,所有图片完全加载完添加到页面上

封装加载图片的方法

            function loadImg(src){

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

                 var img = document.createElement('img')

                 img.src = src

                 img.onload = function(){

                  resolve( img )

               }

                img.error = function(){

                   reject()

                  }

             }

      }

 

                     Promise.all([

                      loadImg

                      ('图片路径'),

                     loading

                       ('图片路径')

                   ]).then(function(imgs){

                    imgs.forEach((img)=>{

                    document.body.appendChild(img)

                    }

              }

 

                Promise.race([

                   loadImg

                    ('图片路径')

                   loadImg

                   ('图片路径')

           ]).then(function(img){

                 document.body.appendChild(img)

         }

promise缺点

①一旦新建就会立即执行,无法中途取消

②如果不设置回调函数,promise内容抛出的错误,不会反应到外部

③当处于pending状态时,无法得知目前进展到哪一个阶段

promise的链式操作代码繁多,有一个方法可以解决既简单又方便

Async:异步主要是将异步的代码变成同步的写法

await等待  await   promise对象

await异步参数

async  function fn(){

let ret = await promiseAjax({url:'data/arr.txt'})

console.log(ret)

ret = await promiseAjax({url:'data/list/txt'})

console.log(ret)

}

fn()

需要引入jquery.js

 

 async function fn(){
            try{
                let ret=await new Promise((resolve,reject)=>{
                //....
                if(成功了){
                    resolve(成功的数据)
                }else{
                    reject(错误的信息)
                }
                })
            }.catch(e){
                console.log(e);
            }finally{
                //不管有没有错误这里的代码都会执行
            }
        }