前语:目前工作在做的项目是前端基于vue的组件式开发,通过api接口调用,后端数据逻辑是一个c#实现的WCF服务

1.总结自己在c# .NET 4.5后的新异步方式  async搭配await来实现  一个重要的类Task(这个和之前的Therad类很相似)

  1.1 首先async是一个修饰符,它只能用在方法或者事件处理程序的签名中,对于方法的话可分为有无返回值两种情况,Task<TResult>可以作为返回值类型

举例:

private async Task Test_one_async() //这是一个无返回值的异步方法
private async Task<string> Test_two_async() //这是一个返回值类类型是string的异步方法
private async void Test_two_async() //这是一个异步事件处理程序

  1.2 await是一个运算符,它表示等待异步执行的结果。也可以理解为await运算符实际上是对方法的返回值进行操作,也就是对Task<TResult>进行操作,而不是对方法本身进行操作。

举例:(当前业务需求是操作了DB后,对应更新系统中的某种缓存,我的写法如下,思路是操作完DB后异步去处理缓存,然后界面可以继续操作)

 public Task<dynamic> doCacheMoudel(FormData formData)
{
string data;
formData.TryGetValue("data", out data);//这是参数转换
AjaxMessge msg = new AjaxMessge();
bool model = updateMoudelDB(data);//进行数据库更新操作
if (model)
{
msg.Set(MsgType.Success, "成功");
Task.Run(() => {
todoCacheInfo();//对应更新缓存的一个方法
});
}
else
{
msg.Set(MsgType.Error, "失败");
}
return GenRet.Msg(msg, "");
}

  上面的适用于某些特定场景,有的场景需要利用async和await来解决,比如我们希望获取到更新的缓存所有数据,这时候就必须等到缓存更新完成后给我们返回这个数据,由于更新缓存的这个操作可能比较耗时,所以不能按照之前的那种同步思想,会造成UI界面卡顿现象,给客户的体验感不好。

 public async Task<dynamic> doCacheMoudel(FormData formData)
{
string data;
formData.TryGetValue("data", out data);//这是参数转换
AjaxMessge msg = new AjaxMessge();
bool model = updateMoudelDB(data);//进行数据库更新操作
if (model)
{
Task<string> task1 = todoCacheInfo();
string value = await task1;//等待缓存更新后的返回值
msg.Set(MsgType.Success, value);
}
else
{
msg.Set(MsgType.Error, "");
}
return GenRet.Msg(msg, "");
}

  这里后期发现我们的缓存更新需求又有了更改,在更新缓存完成后,需要处理和本次缓存更新有关的其他信息进行更新。通俗的说 A执行完成需要执行B,这里用await可以实现,还有一个就是Task的ContinueWith方法来实现

 public async Task<string> todoThing()
{
/*
await doA();//执行A
doB();//A执行完成后才会执行B
*/ /*
string str1 = await doA();//获取A执行完的结果
doB();//获取A执行完的结果后执行B
*/ /*
await doA().ContinueWith(test =>
{
doB();//A执行完后开始执行B,test为A的返回值
});
*/
return "";
}
private async Task<string> doA()
{
    //todosomething()
return "A";
}
private int doB()
{
    //todo()
return ;
}

以上学习的是异步的一个普遍使用方式,后面再vue的异步学习中发现有很多的类似的地方,如下:

2.vue中promise对象和异步思想(ES2017 标准引入了 async 函数,使得异步操作变得更加方便)

  2.1 提一下,ES6 规定,Promise对象是一个构造函数,用来生成Promise实例,Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署

具体作用大家可以看一下这个链接上的讲解

  那么讲到async,一句话它就是 Generator 函数的语法糖,async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

举例:

/**
* 作用:通过code来拿到对应的name,然后把name进行操作
* @param {*} code
*/
async getMameByCode(code){
  try{
  let name = await getSystemName(code)//这个方法是进行了一个http请求,异步的
  return name
  }catch(err){
    console.log(err)
  }
},
//async 方法是返回一个Promise对象,所以可以使用then方法来添加回调函数
getMameByCode('ABC').then(name=>{
//进行name操作
console.log(name)
})

看起来是不是和前面c的异步思想和相似,async和await搭配使用,这里面需要注意的是:async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

同时正常情况下,await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。(这个还不太属性Promise对象的需要看看上面那个链接了),

当然,这个复杂的是错误处理机制了,我们需要知道的是,一旦异步操作出错后,Promise对象相当于被reject,那么异步函数后面的then回调不在触发,这时候需要用catch回调方法来接收当前错误信息,以便方法的不正常处理会被忽略。我们可以简单的理解一下,Promise的两个函数resolve和reject分别对应的是then和catch方法。

  2.2 前面已经说过,await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中,两种写法

async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
} // 另一种写法 async function myFunction() {
await somethingThatReturnsAPromise()
.catch(function (err) {
console.log(err);
});
}

  2.3 多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。举例;

//这是一个继发的动作,先执行完getFoo返回值后再执行getBar()方法
let foo = await getFoo();
let bar = await getBar(); //这个是并发的异步操作,getFoo()和 getBar()两个异步函数同时执行,没有相互依赖
let [foo, bar] = await Promise.all([getFoo(), getBar()]); // 这是第二种写法
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

目前说到的都是普遍较常用的异步处理,里面还有很多有趣的东西在学习之中,看到的朋友可以提意见帮助我改进,后面还有一篇随笔讲的是我对多个异步操作的同步处理思想以及并发进行,同步打印输出顺序的理解(个人认为比较有意思)

c#的异步处理思路和vue前端中异步处理思路比较的更多相关文章

  1. 看JQ时代过来的前端,如何转换思路用Vue打造选项卡组件

    前言 在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来, ...

  2. [转] Vue中异步错误处理

    一般在一个项目开始之前,我们一般会对现有的框架做一定功能上的丰富,比如对ajax请求功能的二次封装,封装的功能可能包含了:通用错误处理,请求过滤,响应过滤等等.如果我们封装的函数叫request,那么 ...

  3. vue前端框架面试问题汇总

    1.active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答: ...

  4. Vue前端框架面试问题

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答 ...

  5. vue前端开发那些事——vue开发遇到的问题

    vue web开发并不是孤立的.它需要众多插件的配合以及其它js框架的支持.本篇想把vue web开发的一些问题,拿出来讨论下.  1.web界面采用哪个UI框架?项目中引用了layui框架.引入框架 ...

  6. vue前端开发那些事——vue组件开发

    vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...

  7. vue前端实战注意事项

    1. vue前端实战注意事项 1.1. 预备 1.1.1. Eslint 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关 ...

  8. vue-d2admin前端axio异步请求详情

    vue-d2admin前端axio异步请求详情 d2admin>src>api>sys.login.js 设计axio api import request from '@/plug ...

  9. 省A类竞赛二等奖--村先游项目VUE前端重构

    村先游--省二竞赛项目VUE重构 源码地址: 重构前的(前端+后台):https://github.com/Archer-Fang/cunxianyou 重构前的(前端):https://github ...

随机推荐

  1. 圣诞节雪花效果,pc端

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Access 字段拼接(UPDATE 数据追加)

    今天遇到一个需求,在Access数据库中,有个net_id 字段,它的值是由 “jjgrape” 这个字符串和 id 字段组成的,也就是说,要把 ‘jjgrape’ 和 id 字段拼接起来: 那怎么拼 ...

  3. 0.9.0.RELEASE版本的spring cloud alibaba sentinel实例

    sentinel即哨兵,相比hystrix断路器而言,它的功能更丰富.hystrix仅支持熔断,当服务消费方调用提供方发现异常后,进入熔断:sentinel不仅支持异常熔断,也支持响应超时熔断,另外还 ...

  4. python for 无限循环

    class Infinit: def __iter__(self): return self def __next__(self): return None for i in Infinit(): p ...

  5. ASP.NET全球化与本地化 c#多国语言的支持 (项目支持多国语言的开发)

    ASP.NET 2.0及以上的开发平台,为全球化本地化应用程序提供了工具,而且实现起来非常简单.以下内容是使用c#,按照帮助一步步做的,将为初学者提供详细的实现步骤. 一 几个必要概念 (一) 支持全 ...

  6. [转帖]中国x86服务器市场H1出货量大幅下滑:浪潮、戴尔和华为排名前三

    中国x86服务器市场H1出货量大幅下滑:浪潮.戴尔和华为排名前三 https://www.cnbeta.com/articles/tech/900237.htm 市场开始下滑了.. 据IDC<2 ...

  7. python gdal安装与简单使用

    原文链接:python gdal安装与简单使用 gdal安装方式一:在网址 https://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal 下载对应python版本的 ...

  8. Centos下的 .so is not an ELF file

    1 错误描述: 测试程序时,发现报错: 动态库不是一个ELF文件, 此时确定LD_LIBRARY_PATH设置正确,然后执行ldconfig命令,发现如上图: 后来执行:file liblog4cpp ...

  9. Linux基础-07-系统的初始化和服务

    1. Linux系统引导的顺序 1) Linux系统引导的顺序:                             其中,BIOS的工作是检查计算机的硬件设备,如CPU.内存和风扇速度等: MB ...

  10. Redis--zset类型操作命令

    有序集合类型 zset (sorted set ) redis 有序集合zset和集合set一样也是string类型元素的集合,且不允许重复的成员. 不同的是 zset 的每个元素都会关联一个分数(分 ...