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

编程问答

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

發(fā)布時間：2024/9/30 编程问答 34 豆豆

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

promise

用promise對函數(shù)封裝:
原來的代碼：

<!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的一個隨機數(shù)let n = rand(1, 100)// 判斷if (n < 30) {alert('恭喜恭喜,獎品為10萬RMB勞斯萊斯優(yōu)惠券')} else { alert('再接再厲') }}, 1000) } )</script> </body> </html>

用promise進行封裝:

用promise進行讀取文件函數(shù)封裝:

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的一個核心模塊，專門用來操作系統(tǒng)中的文件，常用的操作方式是對文件的讀取和寫入使用require(‘fs’)載入fs模塊，模塊中所有方法都有同步和異步兩種形式。異步方法中回調(diào)函數(shù)的第一個參數(shù)總是留給異常參數(shù)（exception），如果方法成功完成，該參數(shù)為null或undefined。異步寫法demo:有一個回調(diào)函數(shù)。

fs.readFile(文件路徑，options,回調(diào)函數(shù))

異步的讀取指定路徑的文件，回調(diào)函數(shù)在讀取文件完成后觸發(fā)

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

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

promise封裝Ajax請求

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

. promise的狀態(tài)改變和對象的值

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

pending變?yōu)?resolved

pending變?yōu)?rejected
說明:只有這2種,且一個 promise對象只能改變一次
無論變?yōu)槌晒€是失敗,都會有一個結(jié)果數(shù)據(jù)
成功的結(jié)果數(shù)據(jù)一般稱為 value,失敗的結(jié)果數(shù)據(jù)一般稱為 reason

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

resolve reject方法

先看resolve:

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

reject:(不管參數(shù)是什么返回的對象狀態(tài)都是失敗）

.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);

返回一個數(shù)組，且只有三個對象都為成功狀態(tài)時數(shù)組才為成功狀態(tài)

then方法的返回結(jié)果是一個promise對象

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

回調(diào)函數(shù)

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

實例

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

這段程序中的 setTimeout 就是一個消耗時間較長（3 秒）的過程，它的第一個參數(shù)是個回調(diào)函數(shù)，第二個參數(shù)是毫秒數(shù)，這個函數(shù)執(zhí)行之后會產(chǎn)生一個子線程，子線程會等待 3 秒，然后執(zhí)行回調(diào)函數(shù) “print”

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

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

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

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

const express = require('express') // eslint-disable-next-line no-unused-vars // 創(chuàng)建應用對象 // 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
結(jié)果:

響應報文的內(nèi)容:

標頭：

模擬發(fā)送請求并得到服務器的數(shù)據(jù):
新建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>發(fā)送請求</button><div id = "result"><br> </div> </body> <script type="text/javascript">const btn = document.getElementsByTagName('button')[0]// 獲取button元素btn.onclick = function () {// 創(chuàng)建對象const xhr = new XMLHttpRequest()// 初始化設置請求方法和URLxhr.open('GET', 'http://localhost:8082/')xhr.send()// 事件綁定，處理服務端返回的結(jié)果xhr.onreadystatechange = function () {if (xhr.readyState === 4) {// 狀態(tài)為4時才表示內(nèi)容已經(jīng)全部返回if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.status)// 狀態(tài)碼console.log(xhr.statusText)// 狀態(tài)字符串console.log(xhr.getAllResponseHeaders())// 所有響應頭console.log(xhr.response)// 響應體}}}} </script> </html>

ajax.js:

const express = require('express') // eslint-disable-next-line no-unused-vars // 創(chuàng)建應用對象 // 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狀態(tài)碼一直是0
加上：

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

再點擊按鈕：

控制臺：

超時設置:
xhr.timeout=2000 兩秒內(nèi)如果還沒有結(jié)果發(fā)送過來就取消請求
超時回調(diào):
xhr.ontimeout = function(){
alert(‘網(wǎng)絡異常，稍后重試’)
}

用axios發(fā)送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>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

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