這篇文章主要介紹JS異步執(zhí)行結(jié)果獲取的方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
回調(diào)
這是最傳統(tǒng)的方法了，也是最簡(jiǎn)單的，如下代碼
重慶分公司
重慶分公司
function foo(cb) {
setTimeout(function() {
cb(1); // 通過(guò)參數(shù)把結(jié)果返回
}, 2000);
}
foo(function(result) { // 調(diào)用foo方法的時(shí)候，通過(guò)回調(diào)把方法返回的數(shù)據(jù)取出來(lái)
console.log(result);
})Promise
Promise是ES6里加入的新對(duì)象，它可以把一個(gè)異步執(zhí)行的方法封裝成支持同步操作的方法，結(jié)合 async/await 完美，下面說(shuō)一下它是怎么封裝一個(gè)方法的
function foo() {
return new Promise((resolve, reject) => {
setTimeout(function() {
resolve(1); // 通過(guò) resolve 參數(shù)把成功的結(jié)果返回
// reject('error'); // 通過(guò) reject 參數(shù)把錯(cuò)誤信息返回
}, 2000);
})
}
// 調(diào)用
foo()
.then(result => console.log(result))
.catch(error => console.log(error));從上面例子可以看出，Promise取值使用的是 .then() 函數(shù)，異常處理用的是 .catch() 函數(shù)
rxjs
rxjs 是一種設(shè)計(jì)思想的javascript語(yǔ)言的實(shí)現(xiàn)框架，rx原名是：ReactiveX
官網(wǎng)是 http://reactivex.io/
開(kāi)源地址 https://github.com/ReactiveX/rxjs
rx口號(hào)是萬(wàn)物皆是流，跟java里萬(wàn)物皆對(duì)象挺像的，它的api也全都是對(duì)流進(jìn)行操作，寫(xiě)起來(lái)還是很爽的，下面看一下rxjs怎么封裝一個(gè)異步執(zhí)行操作
注意，用這貨首先要安裝它在自己的項(xiàng)目里，然后再引入依賴(lài)，如果是瀏覽器環(huán)境可以引入js
import { Observable } from 'rxjs';
function foo() {
return new Observable((observe) => {
setTimeout(function() {
observe.next(1); // 通過(guò) observe.next() 方法把成功的結(jié)果返回
// observe.error('error'); // 通過(guò) observe.error 方法把錯(cuò)誤信息返回
}, 2000);
})
}
// 調(diào)用
foo()
.subscribe(
result => console.log(result),
error => console.log(error)
);可以看到它跟Promise很像，就是變了幾個(gè)參數(shù)名，不過(guò)它可比Promise強(qiáng)大多了
下面來(lái)說(shuō)一下rxjs里的取消操作，沒(méi)錯(cuò)請(qǐng)求還能取消，這騷操作也只有rxjs能實(shí)現(xiàn)了
import { Observable } from 'rxjs';
function foo() {
return new Observable((observe) => {
setTimeout(function() {
observe.next(1); // 通過(guò) observe.next() 方法把成功的結(jié)果返回
// observe.error('error'); // 通過(guò) observe.error 方法把錯(cuò)誤信息返回
}, 2000);
})
}
// 調(diào)用，方法里2s后返回?cái)?shù)據(jù)
const o = foo().subscribe(
result => console.log(result),
error => console.log(error)
);
// 設(shè)置一個(gè)定時(shí)器1s后取消訂閱，這樣console里就不會(huì)打印出結(jié)果了，這個(gè)請(qǐng)求也就被取消了
setTimeout(function() {
o.unsubscribe(); // 取消訂閱
}, 1000);rxjs除了取消執(zhí)行外，還有一個(gè)牛逼的功能，循環(huán)執(zhí)行，對(duì)一個(gè)請(qǐng)求可以一直接收它返回的結(jié)果，看下下面的例子就明白了
import { Observable } from 'rxjs';
function foo() {
return new Observable((observe) => {
let count = 0;
setInterval(function() {
observe.next(count++); // 通過(guò) observe.next() 方法把成功的結(jié)果返回
// observe.error('error'); // 通過(guò) observe.error 方法把錯(cuò)誤信息返回
}, 1000);
})
}
// 調(diào)用
foo().subscribe(
result => console.log(result), // 這行會(huì)每隔1s打印一條數(shù)據(jù)
error => console.log(error)
);因?yàn)樵?ReactiveX 里一切皆是流，所以也就有很多對(duì)流操作的api，比如 fliter, map 等，類(lèi)似于java8里的 stream 的操作，下面看一下例子說(shuō)明白了
import { Observable } from 'rxjs';
// 對(duì)流操作要引入操作類(lèi)
import { map, filter } from 'rxjs/operators';
function foo() {
return new Observable((observe) => {
let count = 0;
setInterval(function() {
observe.next(count++); // 通過(guò) observe.next() 方法把成功的結(jié)果返回
// observe.error('error'); // 通過(guò) observe.error 方法把錯(cuò)誤信息返回
}, 1000);
})
}
// 調(diào)用
const o = foo();
o.pipe(
filter((value: number) => value % 2 === 0),
map((value: number) => value *= 2)
).subscribe(data => console.log(data));1.可以使網(wǎng)頁(yè)具有交互性，例如響應(yīng)用戶(hù)點(diǎn)擊，給用戶(hù)提供更好的體驗(yàn)。 2.可以處理表單，檢驗(yàn)用戶(hù)的輸入，并提供及時(shí)反饋節(jié)省用戶(hù)時(shí)間。 3.可以根據(jù)用戶(hù)的操作，動(dòng)態(tài)的創(chuàng)建頁(yè)面。 4使用JavaScript可以通過(guò)設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。
以上是“JS異步執(zhí)行結(jié)果獲取的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
