Js基础_async_await_promise解决回调地狱

async的用法

async就是异步的意思，它作为一个关键字放到函数前面，用于表示函数是一个异步函数

异步函数也就意味着该函数的执行不会阻塞后面代码的执行，而async 函数返回的是一个promise 对象。

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

可以看出async异步并不阻塞后面代买的执行

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

可以看出async 函数返回的是一个promise 对象，那么我们可以用then继续下一步

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

可以更近一步的看出async函数并没有阻塞后面代码的执行

await的用法

await是等待的意思，他后面可以跟任何表达式，不过我们更多的是放一个返回promise 对象的表达式。

注意await 关键字只能放到async 函数里面

我们写一个函数返回一个promise对象，1秒后返回“ promise对象 ”字符串，在写一个async函数放置await，最后调用控制台将输出如下

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

    awaitFunc();

 这样也就再也不需要回调了，可以很好的解决回调地域的问题

回头来看代码的执行过程，调用 awaitFunc 函数，它里面遇到了await，代码就暂停到这里，不再向下执行了，等后面的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行。具体到代码, 遇到await 之后，代码就暂停执行了， 等待returnPromise执行完毕，1秒后，promise resolve了， 并返回了值， 这时await 才拿到返回值， 然后赋值给data， 暂停结束，代码才开始继续执行下一行console.log语句，最后输出'promise对象'字符串。

这就是async与await，项目实践中我们也经常用到，比如：

    //下钻渲染

    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('获取商品详情失败！')
      }
    },

同

    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('获取商品详情失败！')
        }
      })
    },

 通过以上示例相信可以更好的了解async、await实践运用