js基础之项目中promise和 async的用法

promise主要代码

 Fun() {
            new Promise(resolve => {
                    后端接口().then(() => {
                      //请求到接口的逻辑之类,赋值之类
                        resolve(0) //向then传递的参数0
                    })
            }).then(data => { // data就是resolve中的参数
                 //在请求到接口完成之后,你要做的事情
                        }
                })
    }

async主要代码

//先在created中获取定位城市
  getRegionList().then(res => {
	  //获取定位接口逻辑
	  this.createdFun()
  })
//methods中
async createdFun() {
    //如果未获取到定位城市查询默认配置区域
    let configArea = await this.getPortraitFun()
    //逻辑代码
},
getPortraitFun() {
    ///获取企业配置区域
    return new Promise(resolve => {
        后端接口({
           参数:参数,
        }).then(res => {
            resolve(res.data || {})
        })
    })
},
 async asyncFun() {
    // 办事处列表
   this.getOffice()
   await this.fetchmemberInfoFindById(); // 根据ID查询用户信息
 },

async函数中,可以使用await表达式,async函数执行,遇到await,会先暂停,等到await后的异步执行完毕,再继续往后执行

// 1.使用await
    function testAwait() {
        return new Promise((resolve) => {
            setTimeout(function () {
                console.log("异步中的输出");
                resolve();
            }, 1000);
        });
    }
    async function helloAsync() {
        await testAwait();  // 等待异步
        console.log("async中的输出");
    }
    helloAsync(); // 输出:先输出"异步中的输出",再输出"async中的输出"
    
    
    // 2.不使用await
    function testAwait() {
        return new Promise((resolve) => {
            setTimeout(function () {
                console.log("异步中的输出");
                resolve();
            }, 1000);
        });
    }
    async function helloAsync() {
        testAwait();
        console.log("async中的输出");
    }
    helloAsync(); // 输出:先输出"async中的输出",再输出"异步中的输出"


//async:表示函数是异步执行,
//await:表示当前函数先执行,执行完之后,再执行其他函数
// ps:await用于等待一个promise对象,它只能在async函数中使用.

ajax中的async

async function fetchData() {
    const response = await $.ajax({
        url: 'example.com/api/data',
        dataType: 'json'
    });
    console.log(response);
}

fetchData();

链接: https://pythonjishu.com/fmedzcpsteaocyz/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值