学到哪,总结到哪之es6处理异步新特性

今天刚看到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修饰的回调未完成,下一个不会执行。

暂时理解就这么多啦,感谢看到这(第一次发)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值