今天刚看到ES6新特性async、await,处理异步操作
具体学习方案的基础以及技巧通过该链接https://blog.csdn.net/zhaoxiang66/article/details/81017373
感兴趣的小伙伴点开看一下
我也就是看完用自己的话再梳理一下
我觉着上面的博客很全面了,而且易懂,上图上代码果然很痛快
首先在了解一下,下面纯属个人理解
async是放在方法前,表示这个方法是一个异步处理函数,其中需要await配合使用,当使用一个await修饰多个请求时,都会按顺序,在上一个请求完成后再执行。接下来上图上代码,手动实验一下。
首先定义两个json文件用来获取,本次练习使用axios调用(温馨提示:axios懂得大佬就略过啦,我刚才遇到的直接打开html,前缀ftp://格式,导致axios获取本地文件出现跨域,因为没有http协议,或其他协议,所以我的解决方法是使用VsCode中插件Live Server,强烈推荐很好用哈)接下来创建的json文件如下:
//code.json
{
"code":0,
"msg":"success"
}
//list.json
{
"code":0,
"list":[
{
"id":0,
"name":"张三"
},
{
"id":1,
"name":"李四"
},
{
"id":2,
"name":"王五"
},
{
"id":3,
"name":"赵六"
}
]
}
其次编写axios获取json数据的方法
//刻意给获取list的函数添加参数,只有匹配code值才能获取数据
function get_code(){
return axios.get('code.json')
}
function get_list(param){
return axios.get('list.json',{param})
}
首先常规做法,重复的.then(),现在只是嵌套一层,在部分开发中,需要多层嵌套时,程序员也是很头疼的。下面是主要函数get_data()方法,具体代码如下:
function get_data(){
console.log("这里是get_data方法")
get_code().then((res)=>{
if(res.data.code == 0){
var param = {code:res.data.code}
get_list(param).then(res=>{
console.log(res.data.list)
})
}
})
}
下面是返回结果显示,结果显示正常。
接下来是用我们的async、await更好地、更有效率的完成一样工能的代码,话不多说,上代码
async function getResult(){
console.log("这里是getResult()方法")
let res = await get_code();
if(res.data.code == 0){
var code = res.data.code
let param = {code:code}
let dd = await get_list(param)
console.log(dd.data.list)
}
}
显而易见,在代码逻辑上简化了不少,其次主要解释一下代码,async主要用作修饰,用async修饰的方法,意味着该方法中存在异步操作,同时配合await使用,await修饰即改回调会存在排队等待,上一个await修饰的回调未完成,下一个不会执行。
暂时理解就这么多啦,感谢看到这(第一次发)