vue页面取ajax返回值,Vue前端交互模式、Promise用法(回调地狱)
Promise 概述Promise 是異步編程的一種解決方案,從語法上講,Promise 是一個對象,從它可以獲取異步操作的消息。
優點:可以避免多層異步調用嵌套問題(回調地獄)
Promise 對象提供了簡潔的 API,使得控制異步操作更加容易
Promise基本用法實例化 Promise 對象,構造函數中傳遞函數,該函數中用于處理異步任務
resolve 和 reject 兩個參數用于處理成功和失敗兩種情況,并通過 p.then 獲取處理結果var p = new Promise(function(resolve,reject){
//實現異步任務...
//成功時調用
resolve();
//失敗時調用
reject();
});
p.then(function(ret){
//從resolve得到正常結果
},function(ret){
//從reject得到錯誤信息
});
基于 Promise 處理 Ajax 請求處理原生 Ajaxfunction queryData(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState!=4) return;
if(xhr.status == 200){
resolve(xhr.responseText);
}else{
reject('出錯了');
}
}
xhr.open('get',url);
xhr.send(null);
});
}
//調用
queryData('http://localhost:3000/data').then(
function (data) {
console.log(data);
},
function (data) {
console.log(data);
}
)發送多次 ajax 請求(解決回調地獄)queryData('http://localhost:3000/data')
.then(function (data) {
console.log(data);
//異常情況可以不處理
return queryData('http://localhost:3000/data1');
})
.then(function (data1) {
console.log(data1);
return queryData('http://localhost:3000/data2');
})
.then(function (data2) {
console.log(data2);
});
then參數中的函數返回值返回 Promise 實例對象返回的該實例對象會調用下一個 then
返回普通值返回的普通值會直接傳遞給下一個 then,通過 then 參數中函數的參數接收該值
Promise常用的API
1.實例方法* p.then()得到異步任務的正確結果
* p.catch()獲取異常信息
* p.finally()成功與否都會執行(暫時還不是正式標準)foo()
.then(function (data) {
console.log(data);
})
.catch(function (data) {
console.log(data);
})
.finally(function () {
console.log('finish');
})
也可以寫為:foo()
.then(function (data) {
console.log(data);
},
function (data) {
console.log(data);
})
.finally(function () {
console.log('finish');
})
2.對象方法Promise.all() 并發處理多個異步任務,所有任務都執行完成才能得到結果//p1,p2,p3為Promise實例對象任務
Promise.all([p1,p2,p3]).then((result)=>{
console.log(result);
})Promise.race()并發處理多個異步任務,只要有一個任務完成就能得到結果Promise.race([p1,p2,p3]).then((result)=>{
console.log(result);
})
總結
以上是生活随笔為你收集整理的vue页面取ajax返回值,Vue前端交互模式、Promise用法(回调地狱)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: IMEKRMIG.EXE进程是什么程序
- 下一篇: IMApp.exe是病毒吗 能删除吗 I