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>
顯示正常
相關文章
- 解決PHP Post獲取不到非表單資料的問題PHP
- 解析Promise解決非同步回撥Promise非同步
- promise解決回撥地獄；啥？前端還有“地獄？”Promise前端
- 用Promise建構函式來解決地獄回撥問題Promise函式
- IE瀏覽器非同步請求無法獲取最新資料的解決方案瀏覽器非同步
- vue 中promise 非同步請求資料VuePromise非同步
- 關於JS下大批量非同步任務按順序執行解決方案一點思考JS非同步
- 同步任務與非同步任務執行順序非同步
- 非同步解決方案---promise非同步Promise
- DataPipeline「自定義」資料來源，解決複雜請求邏輯外部資料獲取難題API
- laravel 使用 axios 通過 put 上傳檔案獲取不到資料的解決辦法LaraveliOS
- 使用 useLazyFetch 進行非同步資料獲取非同步
- promise、async、await非同步原理與執行順序PromiseAI非同步
- 關於 Promise 的執行順序Promise
- 【真知拙見】回撥地獄和PromisePromise
- yii2 從資料庫獲取內容值型別與資料庫欄位型別問題解決資料庫型別
- 異源資料同步 → 如何獲取 DataX 已同步資料量？
- SpringMVC的資料獲取問題SpringMVC
- 關於內外網資料同步解決方案
- 爬取LeetCode題目——如何傳送GraphQL Query獲取資料LeetCode
- javascript非同步解決方案之promiseJavaScript非同步Promise
- 非同步解決方案—-Promise與Await非同步PromiseAI
- 非同步解決方案----Promise與Await非同步PromiseAI
- 好程式設計師web前端教程分享怎麼用promise解決回撥和非同步程式設計師Web前端Promise非同步
- Flutter Future 回撥地獄的一種解決思路Flutter
- 輕鬆掌握useAsyncData獲取非同步資料非同步
- promise-java非同步程式設計解決方案PromiseJava非同步程式設計
- 使用Python獲取HTTP請求頭資料PythonHTTP
- 解決 Laravel 接收非簡單請求時，只有收到 OPTIONS 請求的問題Laravel
- 使用Promise解決多層非同步呼叫的簡單學習Promise非同步
- 獲取任務的執行結果
- 【Spring Boot】使用JDBC 獲取相關的資料Spring BootJDBC
- IQKeyboardManager 獲取完成按鈕的解決辦法
- Promise 原始碼：同步執行 resolvePromise原始碼
- springboot：使用非同步註解@Async獲取執行結果的坑Spring Boot非同步
- 多執行緒併發同步問題及解決方案執行緒
- 關於非同步郵件傳送服務的思路，和 Swoole 非同步任務的一個問題非同步
- 詳解非同步任務 | 看 Serverless Task 如何解決任務排程&可觀測性中的問題非同步Server