當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

async与await封装ajax请求

發布時間：2023/12/31 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 async与await封装ajax请求小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>發送 AJAX 請求</title> </head><body><script>// 發送 AJAX 請求, 返回的結果是 Promise 對象function sendAJAX(url) {return new Promise((resolve, reject) => {//1. 創建對象const x = new XMLHttpRequest();//2. 初始化x.open('GET', url);//3. 發送x.send();//4. 事件綁定x.onreadystatechange = function () {if (x.readyState === 4) {if (x.status >= 200 && x.status < 300) {//成功啦resolve(x.response);}else{//如果失敗reject(x.status);}}}})}//promise then 方法測試// sendAJAX("https://api.apiopen.top/getJoke").then(value=>{// console.log(value);// }, reason=>{})// async與await 測試axiosasync function main(){//發送 AJAX 請求let result = await sendAJAX("https://api.apiopen.top/getJoke");console.log(result);}main();</script> </body></html>

如上圖所示，封裝ajax的升級版，使用async函數，更加方便；

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的async与await封装ajax请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。