如何在 Vue 中使用 Axios 非同步請求API
設定基本 HTTP 請求
首先在終端中執行下面的命令把 Axios 安裝到專案中：
installaxiosnpminstallaxios
然後，在 vue 元件中像這樣匯入axios。
//App.vie-importingaxios
<script>
importaxiosfrom'axios'
exportdefault{
setup(){
}
}
</script>
接下來用 axios.get 通過 Kanye REST API 的 URL 獲取隨機語錄。之後可以用 Promise.then 等待請求返回響應。
//App.vue-sendingourHTTPrequest
<script>
importaxiosfrom'axios'
exportdefault{
setup(){
axios.get('https://api.kanye.rest/').then(response=>{
//handleresponse
&nhttp://www.cppcns.com
現在可以從 API 中獲取響應了，先看一下它的含義。把它儲存成名為 quote 的引用。
//App.vue-storingtheresponse
<script>
importaxiosfrom'axios'
import{ref}from'vue'
exportdefault{
setup(){
axios.get('https://api.kanye.rest/').then(response=>{
//handleresponse
quote.value=response
})
return{
quote
}
}
}
</script>最後將其輸出到模板中並以斜體顯示，並用引號引起來，另外還需要給這條語錄加上引用來源。
//App.vue-templatecode
<template>
<div>
<i>"{{quote}}"</i>
<p>-KanyeWest</p>
</div>
</template>
檢查一下瀏覽器中的內容。
我們可以看到隨機返回的侃爺語錄，還有一些額外的資訊，例如請求的響應碼等。
對於我們這個小應用，只對這個 data.quote 值感興趣，所以要在指令碼中指定要訪問 response 上的哪個屬性。
//App.vue-gettingonlyourquote
axios.get('https://api.kanye.rest/').then(response=>{
//handleresponse
quote.value=response.data.quote
})通過上面的程式碼可以得到想要的內容：
Axios 配合 async/await
可以在 Vue 程式中把 Axios 和 async /await 模式結合起來使用。
在設定過程中，首先註釋掉當前的 GET 程式碼，然後建立一個名為 loadQuote 的非同步方法。在內部，可以使用相同的 axios.get 方法，但是我們想用 async 等待它完成，然後把結果儲存在一個名為 response 的常量中。
然後設定 quote 的值。
//App.vue-asyncAxios
constloadQuote=async()=>{
constresponse=awaitKanyeAPI.getQuote()
quote.value=response.data.quote
}
它和前面的程式碼工作原理完全一樣，但這次用了非同步模式。
Axios 的錯誤處理
在 async-await 模式中，可以通過 try 和 catch 來為 API 呼叫新增錯誤處理：
//Errorhandlingwithasync/await
try{
constresponse=awaitKanyeAPI.getQuote()
quote.value=response.data.quote
}catch(err){
&n程式設計客棧bsp;console.log(err)
}
如果使用原始的 promises 語法，可以在 API 呼叫之後新增 .catch 捕獲來自請求的任何錯誤。
//ErrorhandlingwithPromises
axios.get('https://api.kanye.rest/')
.then(response=>{
//handleresponse
quote.value=response.data.quote
}).catch(err=>{
console.log(err)
})
傳送POST請求
下面看一下怎樣傳送 POST 請求。在這裡我們使用 jsONPlaceholder Mock API 呼叫。
他們的文件中提供了一個測試 POST 請求的 /posts 介面。
接下來我們需要建立一個按鈕，當點選按鈕時將會觸發我們的API呼叫。在模板中建立一個名為 “Create Post” 的按鈕，單擊時呼叫名為 createPost 方法。
<div>
<i>"{{quote}}"</i>
<p>-KanyeWest</p>
<p>
<button@click="createPost">CreatePost</button>
</p>
</div>
</template>
下面在程式碼中建立 createPost 方法，然後從 setup 返回。
這個方法，類似於前面的 GET 請求，只需要呼叫 axios.post 並傳入URL（即https://jsonplaceholder.typicode.com/posts ）就可以複製貼上文件中的資料了。
//App.vue
constcreatePost=()=>{
axios.post('https://jsonplaceholder.typicode.com/posts',JSON.stringify({
title:'foo',body:'bar',userId:1,})).then(response=>{
console.log(response)
})
}
單擊按鈕試一下，可以看到控制檯輸出了大量資訊，告訴我們 POST 請求已成功完成。
用 Axios 編寫可複用的 API 呼叫
在專案中通過建立一個 src/services 目錄，用它來組織所有 api 呼叫。
目錄中包含 2 種類型的檔案：
- API.js ：用來建立一個帶有定義的 baseURL 的 Axios 例項，這個例項會用於所有的路由
- *{specific functionality}*API.js ：更具體的檔案，可用於將 api 呼叫組織成可重用的模組
這樣做的好處是可以方便的在開發和生產伺服器之間進行切換，只需修改一小段程式碼就行了。
建立 services/API.js 檔案，並將 Axios baseURL 設定為預設為 Kanye REST API。
API.jsimportaxiosfrom'axios'
exportdefault(url='https://api.kanye.rest')=>{
returnaxios.create({
baseURL:url,})
}
接下來建立一個 KanyeAPI.js 檔案並從 ./API 中匯入 API。在這裡我們要匯出不同的 API 呼叫。
呼叫 API() 會給得到一個 Axios 例項，可以在其中呼叫 .get 或 .post。
//KanyeAPI.js
importAPIfrom'./API'
exportdefault{
getQuote(){
returnAPI().get('/')
},}
然後在 App.vue 內部，讓我們的元件通過可複用的 API 呼叫來使用這個新檔案，而不是自己再去建立 Axios。
//App.vue constloadQuote=程式設計客棧async()=>{ try{ constresponse=awaitKanyeAPI.getQuote()//<---THISLINE quote.value=response.data.quote }catch(err){ console.log(err) } }
下面把 createPost 移到其自己的可重用方法中。
回到 KanyeAPI.js 在匯出預設設定中新增 createPost，這會將 POST 請求的資料作為引數傳遞給我們的 HTTP 請求。
與GET請求類似，通過 API 獲取 axios 例項，但這次需要覆蓋預設 URL 值並傳遞 JSONplaceholder url。然後就可以像過去一樣屌用 Axios POST 了。
//KanyeAPI.js
exportdefault{
getQuote(){
returnAPI().get('/'程式設計客棧)
},createPost(data){
returnAPI('https://jsonplaceholder.typicode.com/').post('/posts',data)
}
}
如此簡單
回到 App.vue ，可以像這樣呼叫新的 post 方法。
//App.vue
constcreatePost=()=>{
constresponse=awaitKanyeAPI.createPost(JSON.stringify({
title:'foo',&nb程式設計客棧sp;body:'bar',}))
console.log(response)
}
現在單擊按鈕時，可以看到專用的 API 能夠正常工作。
把 API 呼叫移出這些 Vue 元件並放在它自己的檔案的好處在於，可以在整個程式中的任何位置使用這些 API 呼叫。這樣可以建立更多可重用和可伸縮的程式碼。
最終程式碼
//App.vue
<template>
<div>
<i>"{{quote}}"</i>
<p>-KanyeWest</p>
<p>
<button@click="createPost">CreatePost</button>
</p>
</div>
</template>
<script>
importaxiosfrom'axios'
import{ref}from'vue'
importKanyeAPIfrom'./services/KanyeAPI'
exportdefault{
setup(){
constquote=ref('')
constloadQuote=async()=>{
try{
constresponse=awaitKanyeAPI.getQuote()
quote.value=response.data.quote
}catch(err){
console.log(err)
}
}
loadQuote()
//axios.get('https://api.kanye.rest/')
//.then(response=>{
////handleresponse
//quote.value=response.data.quote
//}).catch(err=>{
//console.log(err)
//})
constcreatePost=()=>{
constresponse=awaitKanyeAPI.createPost(JSON.stringify({
title:'foo',}))
console.log(response)
//axios.post('https://jsonplaceholder.typicode.com/posts',JSON.stringify({
//title:'foo',//body:'bar',//userId:1,//})).then(response=>{
//console.log(response)
//})
}
return{
createPost,quote
}
}
}
</script>
<style>
#app{
font-family:Avenir,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-align:center;
color:#2c3e50;
margin-top:60px;
}
</style>
//API.js
importaxiosfrom'axios'
exportdefault(url='https://api.kanye.rest')=>{
returnaxios.create({
baseURL:url,})
}
//KanyeAPI.js
importAPIfrom'./API'
exportdefault{
getQuote(){
returnAPI().get('/')
},data)
}
}
以上就是如何在 Vue 中用 Axios 非同步請求API的詳細內容，更多關於Vue 用 Axios 非同步請求API的資料請關注我們其它相關文章！