promise相关

回调地狱
需求是: 通过选择省,再去发请求,选择城市,再发请求,请求到区

$.ajax({
    
     //全国有多少省
    type:'get/post'
    url:'www',
    dataType:'json/jsonp'
    async:true,
    data:{
    
    
        id:"1"
    },
    success:function(res){
    
    
        console.log(res)
    
        $.ajax({
    
     //这个省有多少市
            ....
            success:function(res){
    
    
                $.ajax({
    
    //这个市有多少区
                    ....
                    success:function(res){
    
    
                        console.log(res)
                        ....
                        //这个就叫回调地狱
                    }
                })
            }
        })
    },
    error:function(){
    
    

    },
    complate:function(){
    
    

    }
})

promise如何解决

new Promise(function(resolve,reject){
    
    
    setTimeout(function(){
    
    
        resolve('省')
    },1000)
   
}).then(res=>{
    
    
    console.log(res)
    return new Promise(function(resolve,reject){
    
    
        setTimeout(function(){
    
    
            resolve('市')
        },1000)
    })
}).then(res=>{
    
    
    console.log(res)
    return new Promise(function(resolve,reject){
    
    
        setTimeout(function(){
    
    
            resolve('区')
        },1000)
    })
}).then(res=>{
    
    
    console.log(res)
})

Promise all rase 的用法

// Promise.all()的用法 请求并发,数组里面异步调用必须都成功,才会执行 then 函数
    let promise1 = Promise.resolve('1')
    let promise2 = new Promise(function(resolve,reject){
    
    setTimeout(function(){
    
    reject('2')},1000)})   
    Promise.all([promise1,promise2]).then(res=>{
    
    
        console.log(res)
    }).catch(err=>{
    
    
        console.log(err)    
    })

    // Promise.race()的用法 执行先返回的promise对象的结果
    let promise1 = new Promise(function(resolve,reject){
    
    setTimeout(function(){
    
    resolve("1")},3000)})
    let promise2 = new Promise(function(resolve,reject){
    
    setTimeout(function(){
    
    resolve("2")},2000)})
    Promise.race([promise1,promise2]).then(res=>{
    
    
        console.log(res)
    })

async 函数

// 什么是 async 函数
    // 在普通函数前面加一个 async 就是 async 函数
    // 需要搭配 await 使用 后面跟着异步调用
    // async 函数会将函数的返回值 包装成一个 Promise 对象

    // 在普通函数中 return 的意义是什么 ,是不是所有的函数都有返回值?
    // 在函数中,返回值是 return 后面的数据,如果函数没有 return 就是 undefined
    // function fn(){}
    // console.log(fn())

    //async 将函数的返回值包装成一个Promise对象,无论它是什么,哪怕是 undefined
    // async function add(){
    
    
    //    let a1 =  await Promise.resolve('1')
    //    let a2 =  await Promise.resolve('2')
    //    return 1
    // }
    // add().then(res=>{
    
    
    //     console.log(res)
    // })
    async function add(){
    
     //异步代码同步执行
       let a1 =  await new Promise(function(resolve,reject){
    
    
           setTimeout(function(){
    
    
               resolve('1')
           },1000)
       })
       let a2 =  await new Promise(function(resolve,reject){
    
    
           setTimeout(function(){
    
    
               resolve('2')
           },2000)
       })
       console.log(a1)
       console.log(a2)
    }
    add()
    // console.log(add())

猜你喜欢

转载自blog.csdn.net/qq_45785424/article/details/108065055