前语:目前工作在做的项目是前端基于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. Hive开启mapjoin优化、并行执行、动态分区

    1. mapjoin优化适合小表join大表 set hive.optimize.skewjoin=true; //有数据倾斜时开启负载均衡,默认false set hive.auto.convert ...

  2. PAT 甲级 1069 The Black Hole of Numbers (20 分)(内含别人string处理的精简代码)

    1069 The Black Hole of Numbers (20 分)   For any 4-digit integer except the ones with all the digits ...

  3. SpringMVC:学习笔记(11)——依赖注入与@Autowired

    SpringMVC:学习笔记(11)——依赖注入与@Autowired 使用@Autowired 从Spring2.5开始,它引入了一种全新的依赖注入方式,即通过@Autowired注解.这个注解允许 ...

  4. 【GStreamer开发】GStreamer基础教程05——集成GUI工具

    目标 本教程展示了如何在GStreamer集成一个GUI(比如:GTK+).最基本的原则是GStreamer处理多媒体的播放而GUI处理和用户的交互. 在这个教程里面,我们可以学到: 如何告诉GStr ...

  5. c# 无法加载DLL:找不到指定的模块(异常来自HRESULT:0X8007007E)

    c# 无法加载DLL“xxxx”:找不到指定的模块(异常来自HRESULT:0X8007007E)的一个解决方法 以前的一个c#项目,今天运行的时候突然发现调用DLL时出现了下面的错误. 心中很诧异, ...

  6. vue-cli3 + ts 定义全局方法

    一.定义全局方法不生效  虽然在main.ts当中定义了全局方法,但是在使用的时候根本找不到,也是无语了. 二.解决方法 我在网上找了很多方法,其中很多大神都是这样做的:  但是,我这样写了还是不生效 ...

  7. Python 常用包收集

    转自:http://www.cnblogs.com/Logic0/archive/2010/09/03/1850382.html 常用的自带类库 常用的外部类库       Tkinter———— P ...

  8. jpa简单demo调试druid

    Druid连接池配置见https://www.cnblogs.com/blindjava/p/11504524.html pom <dependency> <groupId>m ...

  9. 【程序人生】程序员真会玩,工作996,生病ICU

    昨天Github上一个项目彻底爆红了网络,短短一天star数突破一万,Issues已破1800,大家纷纷说出有关企业的不合理加班行为,句句吐露程序员的心声,掀起了一波抵制加班潮,抵制996. 该项目里 ...

  10. [C++] 二叉树计算文件单词数

    目录 前置技能 构造和遍历二叉树 文件的打开.读取和写入 需求描述 读取文件 构建二叉树 格式化输入输出 具体实现 main.cpp binarytree.h binarytree.cpp 使用二叉树 ...