什么是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就相当与是一个升级版本
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)