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

编程问答

promise的应用和在VUE中使用axios发送AJAX请求服务器

發布時間：2024/9/30 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 promise的应用和在VUE中使用axios发送AJAX请求服务器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

promise

用promise對函數封裝:
原來的代碼：

<!DOCTYPE html> <html> <head><title>vue demo</title><style type="text/css">body {font: 1.2em arial, helvetica, sans-serif;margin-top: 50px;margin-left:500px;color: #bb00ff;}</style> </head> <body> <div id="app"><button id="btn">點擊抽獎</button> </div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> function rand (m, n) {return Math.ceil(Math.random() * (n - m + 1)) + m - 1 } const btn = document.querySelector('#btn') // 綁定單擊事件 btn.addEventListener('click', function () {// 定時器setTimeout(() => {// /30%1-100123// 獲取從1-100的一個隨機數let n = rand(1, 100)// 判斷if (n < 30) {alert('恭喜恭喜,獎品為10萬RMB勞斯萊斯優惠券')} else { alert('再接再厲') }}, 1000) } )</script> </body> </html>

用promise進行封裝:

用promise進行讀取文件函數封裝:

mineReadfine (path) {return new Promise((resolve, reject) => {require('fs').readFile(path, (err, data) => {if (err) reject(err)resolve(data)})})}mineReadfine('name.txt').then({value=>{console.log(value.toString()); },reason=> {console.log(reason) } })

promise·fs模塊

什么是fs模塊 ==> File System

fs模塊是Node.js的一個核心模塊，專門用來操作系統中的文件，常用的操作方式是對文件的讀取和寫入使用require(‘fs’)載入fs模塊，模塊中所有方法都有同步和異步兩種形式。異步方法中回調函數的第一個參數總是留給異常參數（exception），如果方法成功完成，該參數為null或undefined。異步寫法demo:有一個回調函數。

fs.readFile(文件路徑，options,回調函數)

異步的讀取指定路徑的文件，回調函數在讀取文件完成后觸發

readFileSync方法的第一個參數是文件路徑，第二個參數可以是一個表示配置的對象，也可以是一個表示文本文件編碼的字符串

const fs = require('fs'); fs.readFile('name.txt',(err,data)=>{if(err) throw err;console.log(data.toString()); });

promise封裝Ajax請求

/ ** 封裝一個函數 sendAJAX發送 GET AJAX請求 *參數RL *返回結果Promise對象 */function sendAJAX(){return new Promise((resolve, reject)=>const xhr = new xmlhttprequest();xhr.responseType ='json';xhr.open("GET", url);xhr.send(); ∥處理結果 xhr. onreadystatechange= function(){if(xhr. readystate =4){ ∥/判斷成功 if(xhr. status>=2e&&xhr.status<30e) ∥/成功的結果resolve(xhr. response);}else{reject(xhr. status);}}}}});}sendAJAX("https: api. apiopen. top/getok').then(value =>{console. log(value);} reason =>console.warn(reason); });

. promise的狀態改變和對象的值

實例對象中的一個屬性PromiseState
pending未決定的
resolved 成功
rejected 失敗

pending變為 resolved

pending變為 rejected
說明:只有這2種,且一個 promise對象只能改變一次
無論變為成功還是失敗,都會有一個結果數據
成功的結果數據一般稱為 value,失敗的結果數據一般稱為 reason

實例對象中的另一個屬性PromiseResult 保存著對象成功/失敗的結果
通過resolve和reject函數可以改變

resolve reject方法

先看resolve:

如果運行：
let p2 = Promise.resolve(new Promise((resolve,reject)=>{
reject(‘Error’);
}))

reject:(不管參數是什么返回的對象狀態都是失敗）

.all方法：

let p1 = new Promise((resolve, reject)=>{resolve('OK');} )let p2 =Promise.resolve('Success');let p3 =Promise.resolve('Oh Yeah');const result= Promise.all([p1,p2,p3]);console.log(result);

返回一個數組，且只有三個對象都為成功狀態時數組才為成功狀態

then方法的返回結果是一個promise對象

3.改變promise狀態和指定調函數誰先誰后?
(1)都有可能,正常情況下是先指定調再改變狀態,但也可以先改狀態再指定回調
2如何先改狀態再指定回調?
①在執行器中直接調用 resolve/reject
②延遲更長時間才調用then
(3)什么時候才能得到數據?
①如果先指定的回調,那當狀態發生改變時,回調函數就會調用,得到數據
如果先改變的狀態,那當指定回調時,回調函數就會調用,得到數據
4. promise.then()返回的新 promise的結果狀態由什么決定?
(1)簡單表達:由then指定的回調函數執行的結果決定
(2)詳細表達:
①如果拋出異常,新 promise變為 rejected, reason為拋出的異常
②如果返回的是 promise的任意值,新 promise變為 resolved value為返回的值
③如果返回的是另一個新 promise,此 promise的結果就會成為新 promise的結果
5. promise如何串連多個操作任務?
(1) promise的then返回一個新的 promise,可以開成then的鏈式調用
(2)通過then的鏈式調用串連多個同步/異步任務

回調函數

回調函數就是一個函數，它是在我們啟動一個異步任務的時候就告訴它：等你完成了這個任務之后要干什么。這樣一來主線程幾乎不用關心異步任務的狀態了，他自己會善始善終。

實例

function print() {document.getElementById("demo").innerHTML="RUNOOB!"; } setTimeout(print, 3000);

這段程序中的 setTimeout 就是一個消耗時間較長（3 秒）的過程，它的第一個參數是個回調函數，第二個參數是毫秒數，這個函數執行之后會產生一個子線程，子線程會等待 3 秒，然后執行回調函數 “print”

回調函數的執行時間：狀態改變的時候才會執行。
中斷promise鏈的方法：用return new Promise(()=>{})
resolve reject 拋出異常都會改變對象狀態

ajax請求服務器（使用express框架）

先安裝express:
清空緩存：npm cache clean -f

安裝express: cnpm i express
新建ajax.js:

const express = require('express') // eslint-disable-next-line no-unused-vars // 創建應用對象 // eslint-disable-next-line no-unused-vars const appp = express() appp.get('/', (request, response) => {response.send('hello') }) appp.listen(8081, () => {console.log('begin..') })

終端輸入:
node ajax.js
結果:

響應報文的內容:

標頭：

模擬發送請求并得到服務器的數據:
新建html:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>#result{margin-top: 100px;width: 200px;height: 100px;border: solid 1px #FFA722;}</style> </head> <body><button>發送請求</button><div id = "result"><br> </div> </body> <script type="text/javascript">const btn = document.getElementsByTagName('button')[0]// 獲取button元素btn.onclick = function () {// 創建對象const xhr = new XMLHttpRequest()// 初始化設置請求方法和URLxhr.open('GET', 'http://localhost:8082/')xhr.send()// 事件綁定，處理服務端返回的結果xhr.onreadystatechange = function () {if (xhr.readyState === 4) {// 狀態為4時才表示內容已經全部返回if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.status)// 狀態碼console.log(xhr.statusText)// 狀態字符串console.log(xhr.getAllResponseHeaders())// 所有響應頭console.log(xhr.response)// 響應體}}}} </script> </html>

ajax.js:

const express = require('express') // eslint-disable-next-line no-unused-vars // 創建應用對象 // eslint-disable-next-line no-unused-vars const appp = express() appp.get('/', (request, response) => {// 設置響應頭，設置允許跨域response.setHeader('Access-Control-Allow-Origin','*')response.send('hello r353 i am ajax') }) appp.listen(8082, () => {console.log('begin..') })

request:是對請求報文的封裝
response: 對響應報文的封裝
注意：
response.setHeader(‘Access-Control-Allow-Origin’,’*’)這句話中的Access-Control-Allow-Origin不能換成其他東西，否則xhr狀態碼一直是0
加上：

const result = document.querySelector('#result') result.innerHTML = xhr.response

再點擊按鈕：

控制臺：

超時設置:
xhr.timeout=2000 兩秒內如果還沒有結果發送過來就取消請求
超時回調:
xhr.ontimeout = function(){
alert(‘網絡異常，稍后重試’)
}

用axios發送ajax請求：

<button>GET</button> <button>POST</button><button>AJAX</button> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script> <script type="text/javascript">const btns = document.getElementsByTagName('button')// 獲取button元素btns[0].onclick = function () {axios.get('http://localhost:8083/server', {params: {id: 100,name: 'ds'}})} </script>

總結

以上是生活随笔為你收集整理的promise的应用和在VUE中使用axios发送AJAX请求服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： mybatis复杂查询环境多对一的处理
下一篇： Uncaught (in promise