Js basic _async_await_promise solves callback hell

usage of async

Async means asynchronous. It is placed in front of the function as a keyword to indicate that the function is an asynchronous function.

An asynchronous function means that the execution of the function will not block the execution of the following code, and an async function returns a promise object.

    async function func() {
      return "async"
    };
    func();
    console.log('执行'); //控制台输出 执行

It can be seen that async does not block the execution of subsequent purchases

    async function func() {
      return "async"
    };
    console.log(func())
    console.log('执行'); //控制台输出 执行

It can be seen that the async function returns a promise object , then we can use then to continue to the next step

 

    async function func() {
      return "async"
    };
    func().then( res => {
      console.log(res)
    })
    console.log('执行'); //控制台输出 执行

It can be seen a step further that the async function does not block the execution of the following code

 

usage of await

await means to wait, it can be followed by any expression, but we put an expression that returns a promise object more.

Note that the await keyword can only be placed in async functions

We write a function to return a promise object, return the "promise object" string after 1 second, write an async function to place await, and finally call the console to output the following

 

    function returnPromise() {
      return new Promise((resolve,reject) => {
        setTimeout(()=>{
          resolve('promise对象')
        },1000)
      })
    }
  
    async function awaitFunc() {
      let data = await returnPromise();
      console.log(data)
    }

    awaitFunc();

 In this way, there is no need for callback anymore, which can solve the problem of callback region very well

Looking back at the execution process of the code, calling the awaitFunc function, it encounters an await, the code pauses here, and no longer executes downwards. After the subsequent promise object is executed, then get the value of the promise resolve and return it. After the return value is obtained, it continues to execute downward. Specific to the code, after encountering await, the code will suspend execution, wait for the returnPromise to be executed, and after 1 second, the promise resolves and returns the value. At this time, the await gets the return value, and then assigns it to data, and the pause ends. The code continues to execute the next console.log statement, and finally outputs the 'promise object' string.

 

This is async and await, which we often use in project practice, such as:

 

    //drill down rendering

    async down(path, name){

      let code=this.backname(name);

      let data = await axios.get(`api-website/sys/st-sch-school/schoolByGIS?province=${code}`);

      data=data.data.result;

      let json = await axios.get(path);

      this.$echarts.registerMap(name, json.data);

      this.myChart.setOption(

        DownheatOption(data, name),

        false,

      );

    },

 

  async mounted() {
    let map = await axios.get(`http://localhost:8080/static/json/china.json`);
    this.chinajson = map.data;
    
    let one= await axios.get('api-website/sys/st-sch-school/schoolByGIS?batch=3');
    this.heatarr.all=one.data.result;//全部高校数据
  },

 

    async goodsDetails() {
      let self = this;
      let result = await api.request('goodsDetails', { code: self.code })
      if (result.status == 0) {
        let data = result.data;
        self.name = data.name;
        self.images = JSON.parse(data.images);
      } else {
        self.$message.error('获取商品详情失败！')
      }
    },

 

same

    goodsDetails() {
      let self = this;
      api.request('goodsDetails', { code: self.code }, res => {
        if (res.status == 0) {
          let data = res.data;
          console.log('data', data)
          self.name = data.name;
          self.images = JSON.parse(data.images);
        } else {
          self.$message.error('获取商品详情失败！')
        }
      })
    },

 Through the above examples, I believe that we can better understand the practical application of async and await