Promise相關內容（三）——非同步獲取伺服器資料：promise方式解決回撥地獄的問題。通過多個.then使程式碼可讀性更高 & 解決非同步任務的序列執行，保證按順序傳送請求獲取資料
Promise相關內容（三）——非同步獲取伺服器資料：promise方式解決回撥地獄的問題。通過多個.then使程式碼可讀性更高 & 解決非同步任務的序列執行，保證按順序傳送請求獲取資料
第一種形式：常規寫法-正常
第一步：新建myapi資料夾
第二步：在資料夾myapi裡面新建index.js和pubulic資料夾
第三步：在publice資料夾下新建檔案01.html
內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Promise</div>
<script type="text/javascript">
/*
如何獲取非同步的結果
*/
function queryData () {
let xhr = new XMLHttpRequest()
xhr.open('get', 'data')
xhr.send(null)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 獲取伺服器響應的結果
let ret = xhr.responseText
console.log(ret)
}
}
}
}
queryData()
</script>
</body>
</html>
第四步：index.js檔案如下:
const express = require('express');
const app = express();
// 啟動靜態資源服務
app.use(express.static('public'))
app.get('/data', (req, res) => {
let info = {
username: 'lisi',
age: 12
}
// res.send('Hello World')
res.json(info)
})
app.listen(3000, () => {
console.log('running...')
})
第五步：在myapi資料夾下，命令列啟動伺服器
node index.js
第六步：開啟頁面，控制檯驗證獲取資料——22行和伺服器均驗證成功
第二種形式：如果返回值形式驗證，顯示undefined
function queryData () {
let xhr = new XMLHttpRequest()
xhr.open('get', 'data')
xhr.send(null)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 獲取伺服器響應的結果
let ret = xhr.responseText
// console.log(ret)
+ return ret
}
}
}
}
- queryData()
+ let ret = queryData()
+ console.log(ret)
此時列印ret，顯示為undefined
第三種形式：返回值形式驗證，顯示為null
/*
如何獲取非同步的結果
*/
function queryData () {
let xhr = new XMLHttpRequest()
xhr.open('get', 'data')
xhr.send(null)
+ let ret = null
// 回撥函式（定義——由自己定義，由別人/瀏覽器呼叫）
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 獲取伺服器響應的結果
// let ret = xhr.responseText
// console.log(ret)
// return ret
ret = xhr.responseText
}
}
}
return ret //為null原因：當返回值時，ret此時尚為空
}
// 非同步的結果無法通過返回值的方式獲取
// 必須使用回撥函式的方式獲取
+ let ret = queryData()
+ console.log(ret)
拿不到結果，顯示為空。列印為顯示為null
第四種形式：回撥函式的方式獲取資料驗證，正常顯示
單層回撥
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Promise</div>
<script type="text/javascript">
/*
如何獲取非同步的結果
*/
function queryData (callback) {
let xhr = new XMLHttpRequest()
xhr.open('get', 'data')
xhr.send(null)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 獲取伺服器響應的結果
let ret = xhr.responseText
callback(ret)
}
}
}
}
// callback(ret)中的ret傳給data
queryData(function(data) {
console.log(data)
})
</script>
</body>
</html>
開啟頁面，顯示正常（回撥函式，獲取資料）
**變形寫法：**加個路徑，顯示結果沒有變化
注意寫法對比，程式碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Promise</div>
<script type="text/javascript">
/*
如何獲取非同步的結果
*/
+ function queryData (callback,path) {
let xhr = new XMLHttpRequest()
+ xhr.open('get', path)
xhr.send(null)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 獲取伺服器響應的結果
let ret = xhr.responseText
callback(ret)
}
}
}
}
// callback(ret)中的ret傳給data
queryData(function(data) {
console.log(data)
+ },'data')
</script>
</body>
</html>
列印data，顯示結果同上
多層回撥，出現回撥地獄，影響效能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Promise</div>
<script type="text/javascript">
/*
如何獲取非同步的結果
*/
function queryData (callback,path) {
let xhr = new XMLHttpRequest()
xhr.open('get', path)
xhr.send(null)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 獲取伺服器響應的結果
let ret = xhr.responseText
callback(ret)
}
}
}
}
// callback(ret)中的ret傳給data
// queryData(function(data) {
// console.log(data)
// },'data')
// 回撥地獄
queryData(function(data) {
console.log(data)
queryData(function(data) {
console.log(data)
queryData(function(data) {
console.log(data)
}, 'data2')
}, 'data1')
}, 'data')
</script>
</body>
</html>
多層回撥，出現回撥地獄，可讀性不高，不推薦
為了解決上述問題（非同步獲取資料和多層巢狀出現的回撥地獄），就誕生了Promise
解決非同步任務的序列執行，按順序執行任務，保證第一個非同步任務的結果拿到後，再發請求進行第二個非同步任務，依次類推；採用promise方式，不用巢狀，改為橫向的水平關係（多個.then），程式碼的可讀性更高，解決回撥地獄的問題
單層資料獲取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Promise</div>
<script type="text/javascript">
/*
如何獲取非同步的結果
*/
function queryData (path) {
return new Promise(function(resolve, reject) {
// 處理非同步任務
let xhr = new XMLHttpRequest()
xhr.open('get', path)
xhr.send(null)
// 回撥函式（由自己定義，由別人呼叫）
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 獲取伺服器響應的結果
let ret = xhr.responseText
resolve(ret)
}
}
}
})
}
queryData('data')
.then(ret => {
console.log(ret)
})
</script>
</body>
</html>
顯示結果正常
多層資料時，也正常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Promise</div>
<script type="text/javascript">
/*
如何獲取非同步的結果
*/
function queryData (path) {
return new Promise(function(resolve, reject) {
// 處理非同步任務
let xhr = new XMLHttpRequest()
xhr.open('get', path)
xhr.send(null)
// 回撥函式（由自己定義，由別人呼叫）
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 獲取伺服器響應的結果
let ret = xhr.responseText
resolve(ret)
}
}
}
})
}
queryData('data')
.then(ret => {
console.log(ret)
return queryData('data1')
})
.then(ret=>{
console.log(ret)
return queryData('data2')
})
.then(ret=>{
console.log(ret)
})
</script>
</body>
</html>
顯示正常
相關文章
- 解析Promise解決非同步回撥Promise非同步
- 解決PHP Post獲取不到非表單資料的問題PHP
- promise解決回撥地獄；啥？前端還有“地獄？”Promise前端
- 用Promise建構函式來解決地獄回撥問題Promise函式
- IE瀏覽器非同步請求無法獲取最新資料的解決方案瀏覽器非同步
- 二、傳送請求，獲取響應資料
- vue 中promise 非同步請求資料VuePromise非同步
- ajax回撥函式執行順序帶來的同步非同步問題函式非同步
- 關於JS下大批量非同步任務按順序執行解決方案一點思考JS非同步
- 同步任務與非同步任務執行順序非同步
- Promise中多個回撥函式之間的資料傳遞Promise函式
- 解決在IE中獲取資料的快取問題，執行環境為node.js快取Node.js
- 非同步解決方案---promise非同步Promise
- 通過nginx中轉獲取不到IP的問題解決Nginx
- 關於 Promise 的執行順序Promise
- 【真知拙見】回撥地獄和PromisePromise
- 解決兩相同資料庫資料同步的問題 (轉)資料庫
- laravel 使用 axios 通過 put 上傳檔案獲取不到資料的解決辦法LaraveliOS
- promise、async、await非同步原理與執行順序PromiseAI非同步
- 關於海量資料的獲取問題
- 使用 useLazyFetch 進行非同步資料獲取非同步
- yii2 從資料庫獲取內容值型別與資料庫欄位型別問題解決資料庫型別
- 異源資料同步 → 如何獲取 DataX 已同步資料量？
- DataPipeline「自定義」資料來源，解決複雜請求邏輯外部資料獲取難題API
- 關於內外網資料同步解決方案
- jquery實現的ajax請求獲取json資料程式碼jQueryJSON
- javascript非同步解決方案之promiseJavaScript非同步Promise
- 好程式設計師web前端教程分享怎麼用promise解決回撥和非同步程式設計師Web前端Promise非同步
- Flutter Future 回撥地獄的一種解決思路Flutter
- 多執行緒-執行緒安全問題的產生原因分析以及同步程式碼塊的方式解決執行緒安全問題執行緒
- 解決Android通過BitmapFactory獲取圖片寬高度相反的問題Android
- 輕鬆掌握useAsyncData獲取非同步資料非同步
- promise-java非同步程式設計解決方案PromiseJava非同步程式設計
- 獲取任務的執行結果
- SpringMVC的資料獲取問題SpringMVC
- 使用Promise解決多層非同步呼叫的簡單學習Promise非同步
- 非同步解決方案—-Promise與Await非同步PromiseAI
- 非同步解決方案----Promise與Await非同步PromiseAI