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/