前语:目前工作在做的项目是前端基于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. Java 有双引号的字符串处理

    public class Test{ public static void main(String[] args){ String str1 = "\"name\"&qu ...

  2. 泡泡一分钟:Semi-Dense Visual-Inertial Odometry and Mapping for Quadrotors with SWAP Constraints

    张宁 Semi-Dense Visual-Inertial Odometry and Mapping for Quadrotors with SWAP Constraints 具有SWAP约束的四旋翼 ...

  3. 【设备问题】罗技M590鼠标无法连接Macbook Pro问题解决

    问题现象 罗技蓝牙鼠标连接的时候一直显示连接中,但是一直连接不上. 解决方法 长按那个切换模式的按钮,重置下,再点击连接,显示能够连接成功.

  4. Swift4.0复习泛型

    1.泛型的基本使用: /// 定义了一个泛型结构体MyStruct, /// 其泛型形参为T struct MyStruct<T> {   /// 用泛型T定义存储式成员属性t var t ...

  5. 【CSS3练习】在圆上旋转的菜单

    先上效果图:就是用js计算每个小圆的位置分布到大圆的边线上,然后在让大圆旋转起来. 线上查看地址:http://dtdxrk.github.io/game/css3-demo/diffuse.html ...

  6. v-for key的作用

    v-for中的key来给每个节点做一个唯一的标识,diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点:key的主要作用是为了高效的更新虚拟dom,另外vue在使用相同标签名元素的过渡切换 ...

  7. Linux 环境变量设置的几种方法

    From:http://home.eeworld.com.cn/home.php?mod=space&uid=291513&do=blog&id=40557 环境变量是和She ...

  8. 守护进程daemon

    # -*- coding: utf-8 -*- import sys, os, time, atexit from signal import SIGTERM class Daemon: def __ ...

  9. LeetCode 242. 有效的字母异位词(Valid Anagram)

    242. 有效的字母异位词 LeetCode242. Valid Anagram 题目描述 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词. 示例 1: 输入: s ...

  10. [转帖]Linux下主机间文件传输命令

    Linux下主机间文件传输命令 https://yq.aliyun.com/articles/53631?spm=a2c4e.11155435.0.0.580ce8ef4Q9uzs   SCP命令: ...