async比Promise好在什么地方

什么是Promise？

Promise是ES6中的异步编程解决方案，在代码中表现为一个对象，可以通过构造函数Promise来实例化，有了Promise对象，可以将异步操作以同步的流程表达出来，避免了回调地狱(回调函数层层嵌套）

那么我们来看一个简单的例子用axios来调用一个接口

const test = axios({
      method: "get",
      url:
        "https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list"
    })
    window.console.log(test)
  }

返回值

这里的Promise对象就是test的返回值，但是其实我们只需要PromiseValue中的值，所以我们的then的默认参数就为 PromiseValue

axios({
      method: "get",
      url:
        "https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list"
    }).then(response => window.console.log(response));
  }

这里的输出的值就是PropmiseValue对象的值

这样才可以看到PropmiseValue比较麻烦，而且他的防止避免了回调地狱(回调函数层层嵌套),其实只是看上去有了改进其实还是很麻烦，因此ES7重新引入了async

async

async function asyFile() {
    let a = await readFile('a.txt');
    let b = await readFile('b.txt');
    let c = await readFile('c.txt');
    console.log(a.toString());
    console.log(b.toString());
    console.log(c.toString());
}

asyFile()

这样就可以直接进行分布进行异步代码操作，并且返回值直接就是为PropmiseValue对象

例子

我这里用的vue cli脚手架

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  mounted() {
    this.getAddressData();
  },
  methods:{
     async getAddressData () {
        const data = await axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list');
        window.console.log(data)
    }
  }
};
</script>

返回值 

 总结

我们这里axios就是相当与是promise的

Promise其实就是一个规则，读取数据还是要用Ajax，这里的axios里面的含有promise方法的，而async就相当与是一个升级版本