JS异步处理

这是我的第一篇学习笔记,写的不好,请大家多多包涵。

在我工作写代码的过程中,经常会用到异步操作,那时的我,只用到过ajax的异步,年轻的我也没怎么深究。就这样傻傻地用了好几个月。

某天突然出现一个契机,遇到一个不是AJAX请求,但是要做异步处理的情况。这时,作为一个正常人,度娘已经打开了。promise,async await几乎成了所有文章的关键字,我就好好了解了一下。

1. Promise

Promise是一种异步解决方案,有三种状态分别为pending-进行中、resolved-已完成、rejected-已失败
现在先来说说它的基本用法:

// 方法1
let promise = new Promise ( (resolve, reject) => {
    if ( success ) {
        resolve(a) // pending ——> resolved 参数将传递给对应的回调方法
    } else {
        reject(err) // pending ——> rejectd
    }
} )

// 方法2
function promise () {
    return new Promise ( function (resolve, reject) {
        if ( success ) {
            resolve(a)
        } else {
            reject(err)
        }
    } )
}

PS:参数中的方法会在声明此对象的时候立即执行

then() VS catch()

promise.then(
    () => { console.log('this is success callback') }, // resolve的回调
    () => { console.log('this is fail callback') } // rejected的回调
)
promise.then(
    () => { console.log('this is success callback') }
).catch(
    (err) => { console.log(err) }
)

对于then(),catch()都会返回一个新的Promise对象,之前我一直有个疑问,如果有多个相同状态的回调,是连续触发呢,还是只触发一个。实验证明,确实只能触发一个回调。

Promise其他API

resolve() reject()

参数是Promise:原样返回
参数带有then方法:转换为Promise后立即执行then方法
参数不带then方法、不是对象或没有参数:返回resolved状态的Promise

all
var promise = Promise.all( [p1, p2, p3] )
promise.then(
    ...
).catch(
    ...
)

只有当状态一起变为resolved,状态才会变成resolved,只要有一个变成rejected,则状态立刻变为rejected

race
var promise = Promise.race( [p1, p2, p3] )
promise.then(
    ...
).catch(
    ...
)

与all有一点不用,只要有一个状态改变,整体状态就执行相应的回调函数

finally

不管最终状态是什么,一定被执行(状态改变时执行)

2. async await

说到async await,我之前是很少接触的。可以说是完全不用,因为我都用Promise来代替所有的异步操作,我相信大多数人和我一样。
Promise是回调函数的升级,因为他通过.then链路,避免了回调地狱。
而async await 可以Promise的升级,就让我们来好好了解下吧。

async await用来来干什么

既然说是Promise的升级,那么它肯定也是异步编程的解决方案
async是用来声明一个function是异步的,await则是等待这个异步function完成的

async function testAsync() {
    return "hello async";
}

const result = testAsync();
console.log(result);

这里打印出来的result竟然是一个Promise对象,所以说它是Promise升级,它的本质其实还是Promise
要说一句,await必须在async声明的异步函数里才能使用

await等的是什么

这样看来await等的是一个Promise对象,其实不然,await等的其实就是任意表达式的结果,其实等Promise也是在等他返回的值。

async await 有什么好处

Promise当执行链路多而复杂时,函数的各种参数可以让你欲仙欲死,然而async await代码清晰,逻辑简单,看上去像是同步方法一样。

3. AJAX

当然在了解这些新特性的同时,我也不会喜新厌旧,ajax的原理也是需要了解一下的。
AJAX的原理创建异步对象XMLHttpRequest,创建方法:new XMLHttpRequest(),当然也有特例,IE6以上的IE创建方法则是new ActiveObject("Msxml2.XMLHTTP")。而异步的原理就是设置回调函数onreadystatechange,每当异步对象readyState状态改变则会进入此回调函数。异步操作就此完成。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,703评论 1 56
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,707评论 0 5
  • 你不知道JS:异步 第三章:Promises 在第二章,我们指出了采用回调来表达异步和管理并发时的两种主要不足:缺...
    purple_force阅读 2,058评论 0 4
  • 目录:Promise 的含义基本用法Promise.prototype.then()Promise.prototy...
    BluesCurry阅读 1,490评论 0 8
  • 由于项目中嵌套html5页面的需求越来越多,大家通常会使用android自带webview,这对于一些简单的页面没...
    MardaWang阅读 4,959评论 0 2