1.promise是一个构造函数,下面我们来看一下基础使用

//因为是个构造函数肯定是new方法使用
        const pro=new Promise(function(resolve,reject){
            //new出来的对象里面一般存放异步任务
            //这里是模拟ajax向服务器请求数据
            setTimeout(function(){
                let data='从数据库得到数据'
                resolve(data)//返回数据成功
            },1000)
        })
        console.log(pro);

产看后台打印,我们看三个重要的点,一个是then方法,还有PromiseStatus,PromiseValue

axios异步请求数据没有_javascript

 

 PromiseStatus的几种状态:

pending初始化、fulfilled成功、rejected(未决定,履行,拒绝),同一时间只能存在一种状态,且状态一旦改变就不能再变。promise是一个构造函数,promise对象代表一项有两种可能结果(成功或失败)的任务,它还持有多个回调,出现不同结果时分别发出相应回调。

PromiseStatus:resolved是我们new构造函数里的回调里的第一个参数,这里的参数是函数,表示成功时调用,第二个参数表示失败时调用,PromiseValue里面则是成功返回的数据

2.我们来看一下then方法的作用是什么,简单来说它就是一个回调函数,对成功和失败的结果做一个处理,成功的处理是then中的第一个处理函数,参数是value,失败的结果是第二个处理函数,参数是reason

const pro=new Promise(function(resolve,reject){
            setTimeout(function(){
                let data='从数据库得到数据'
                resolve(data)
            },1000)
        })
        //then里面有两个函数参数,第一个表示成功时调用,第二个表示失败时调用
        pro.then(function(value){ 
            //先来打印一下回调里的参数
            console.log(value);
        },function(reason){

        })

 value的值就是promise对象中异步返回执行resolve成功函数回调的返回值

axios异步请求数据没有_数据_02

3. 接着我们看一下失败的返回值,这次就得用失败的回调函数了

const pro=new Promise(function(resolve,reject){
            setTimeout(function(){
                /* let data='从数据库得到数据' */
                /* resolve(data) */
                let data='数据读取失败'
                reject(data)
            },1000)
        })
        //then里面有两个函数参数,第一个表示成功时调用,第二个表示失败时调用
        pro.then(function(value){ 
            //先来打印一下回调里的参数
            console.log(value);
        },function(reason){
            console.log(reason);
        })

来看下失败回调的打印结果

axios异步请求数据没有_javascript_03

 4.接下来我们来看pro对象调用了then方法之后返回个什么东西

const pro=new Promise(function(resolve,reject){
            setTimeout(function(){
                let data='从数据库得到数据' 
                resolve(data) 
            },1000) 
        })
        //将pro.then方法的调用返回值赋值给pro1
        pro1=pro.then(function(value){ 
            console.log(value);
        },function(reason){
            console.log(reason);
        })
        console.log(pro1);
        //判断返回类型
        console.log(typeof pro1);

这边看一下浏览器打印结果

axios异步请求数据没有_javascript_04

 这里注意一点,先执行了pro.then后面的打印语句,这是因为promise是异步方法,先执行后面的函数语句,再执行promise里面的异步任务。还有这里的Promisestatus的值是由回调函数的返回结果来决定的,这一点我们去下面看,什么叫返回结果,也就是return的结果

这个then方法调用,竟然重新返回了一个promise对象,这玩意的原型竟然还是promise,这说明了什么?这说明这promise还能重复调用。

5.我们接下来看看它是否能重复调用then方法

const pro=new Promise(function(resolve,reject){
            setTimeout(function(){
                let data='从数据库得到数据' 
                resolve(data) 
            },1000) 
        })
        //为了代码简洁我们用箭头函数,并且去掉失败的结果,来看重复调用
        pro.then(value=>{ 
            console.log(value);
            return new Promise((resolve,reject)=>{
                setTimeout(function(){
                resolve('ok') 
            },1000)    
        })
        }).then(value=>{
            console.log(value);
        })
        console.log('我不是异步函数,我先执行');

axios异步请求数据没有_axios异步请求数据没有_05

 pro1的返回值的promisestatus取决于,return 后面的的执行的任务是否成功,因为我用成功的回调函数回调了一个ok所有pro1的状态是成功,而promiseresult是返回值。

还有注意4中的结果没有返回值为什么promisestatus也是成功,因为没有返回值就是undefined,返回undefined也算返回值,是成功。

学到这你自己可以试一下将return中的回调函数换成失败的,再看pro1中的状态。