日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
在Vue中用Axios異步請(qǐng)求API

Axios 是 Javascript 中最受歡迎的 HTTP 庫(kù)之一，我們可以用它在 Vue 程序中調(diào)用API。

在本文中我們用 Vue 3 和 Axios 寫一個(gè)侃爺語錄小應(yīng)用，侃爺是國(guó)內(nèi)粉絲對(duì)美國(guó)當(dāng)紅饒舌歌手 Kanye West 的昵稱?？梢杂眠@個(gè)小程序?qū)W習(xí)英語，同時(shí)也能從侃爺?shù)脑捴械玫揭恍﹩l(fā)，而且還可以學(xué)習(xí)用 Vue 異步請(qǐng)求API，一舉多得，何樂而不為呢?

[[400375]]

設(shè)置基本 HTTP 請(qǐng)求

首先在終端中執(zhí)行下面的命令把 Axios 安裝到項(xiàng)目中：

 
 
 
 
    
  
  
  
  
  1. install axiosnpm install axios 
    2.

然后，在 Vue 組件中像這樣導(dǎo)入axios。

 
 
 
 
    
  
  
  
  
  1. //App.vie - importing axios 
    2.   
  
  
  
  2.  
    3.

接下來用 axios.get 通過 Kanye REST API 的 URL 獲取隨機(jī)語錄。之后可以用 Promise.then 等待請(qǐng)求返回響應(yīng)。

 
 
 
 
    
  
  
  
  
  1. //App.vue - sending our HTTP request 
    2.   
  
  
  
  2.  
    3.

現(xiàn)在可以從 API 中獲取響應(yīng)了，先看一下它的含義。把它保存成名為 quote 的引用。

 
 
 
 
    
  
  
  
  
  1. //App.vue - storing the response 
    2.   
  
  
  
  2.  
    3.

最后將其輸出到模板中并以斜體顯示，并用引號(hào)引起來，另外還需要給這條語錄加上引用來源。

 
 
 
 
    
  
  
  
  
  1. //App.vue - template code 
    2.   
  
  
  
  2.  
    3.

檢查一下瀏覽器中的內(nèi)容。

我們可以看到隨機(jī)返回的侃爺語錄，還有一些額外的信息，例如請(qǐng)求的響應(yīng)碼等。

對(duì)于我們這個(gè)小應(yīng)用，只對(duì)這個(gè) data.quote 值感興趣，所以要在腳本中指定要訪問 response 上的哪個(gè)屬性。

 
 
 
 
    
  
  
  
  
  1. //App.vue - getting only our quote 
    2.   
  
  
  
  2. axios.get('https://api.kanye.rest/').then(response => { 
    3.   
  
  
  
  3.         // handle response 
    4.   
  
  
  
  4.         quote.value = response.data.quote 
    5.   
  
  
  
  5. }) 
    6.

通過上面的代碼可以得到想要的內(nèi)容：

Axios 配合 async/await

可以在 Vue 程序中把 Axios 和 async /await 模式結(jié)合起來使用。

在設(shè)置過程中，首先注釋掉當(dāng)前的 GET 代碼，然后創(chuàng)建一個(gè)名為 loadQuote 的異步方法。在內(nèi)部，可以使用相同的 axios.get 方法，但是我們想用 async 等待它完成，然后把結(jié)果保存在一個(gè)名為 response 的常量中。

然后設(shè)置 quote 的值。

 
 
 
 
    
  
  
  
  
  1. //App.vue - async Axios 
    2.   
  
  
  
  2. const loadQuote = async () => { 
    3.   
  
  
  
  3.       const response = await KanyeAPI.getQuote() 
    4.   
  
  
  
  4.       quote.value = response.data.quote 
    5.   
  
  
  
  5. } 
    6.

它和前面的代碼工作原理完全一樣，但這次用了異步模式。

Axios 的錯(cuò)誤處理

在 async-await 模式中，可以通過 try 和 catch 來為 API 調(diào)用添加錯(cuò)誤處理：

 
 
 
 
    
  
  
  
  
  1. //Error handling with async/await 
    2.   
  
  
  
  2. try { 
    3.   
  
  
  
  3.         const response = await KanyeAPI.getQuote() 
    4.   
  
  
  
  4.         quote.value = response.data.quote 
    5.   
  
  
  
  5. } catch (err) { 
    6.   
  
  
  
  6.         console.log(err) 
    7.   
  
  
  
  7. } 
    8.

如果使用原始的 promises 語法，可以在 API 調(diào)用之后添加 .catch 捕獲來自請(qǐng)求的任何錯(cuò)誤。

 
 
 
 
    
  
  
  
  
  1. //Error handling with Promises 
    2.   
  
  
  
  2. axios.get('https://api.kanye.rest/') 
    3.   
  
  
  
  3.       .then(response => { 
    4.   
  
  
  
  4.         // handle response 
    5.   
  
  
  
  5.         quote.value = response.data.quote 
    6.   
  
  
  
  6.       }).catch(err => { 
    7.   
  
  
  
  7.       console.log(err) 
    8.   
  
  
  
  8. }) 
    9.

發(fā)送POST請(qǐng)求

下面看一下怎樣發(fā)送 POST 請(qǐng)求。在這里我們使用 JSONPlaceholder Mock API 調(diào)用。

他們的文檔中提供了一個(gè)測(cè)試 POST 請(qǐng)求的 /posts 接口。

接下來我們需要?jiǎng)?chuàng)建一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕時(shí)將會(huì)觸發(fā)我們的API調(diào)用。在模板中創(chuàng)建一個(gè)名為 “Create Post” 的按鈕，單擊時(shí)調(diào)用名為 createPost 方法。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   "{{ quote }}" 
    3.   
  
  
  
  3.   
    - Kanye West
     
    4.   
  
  
  
  4.   
     
    5.   
  
  
  
  5.     Create Post 
    6.   
  
  
  
  6.   
     
    7.
 
  • template> 

    • 下面在代碼中創(chuàng)建 createPost 方法，然后從 setup 返回。

    這個(gè)方法，類似于前面的 GET 請(qǐng)求，只需要調(diào)用 axios.post 并傳入U(xiǎn)RL(即https://jsonplaceholder.typicode.com/posts )就可以復(fù)制粘貼文檔中的數(shù)據(jù)了。

     
 
 
 
      
  
  
  
  
    1. //App.vue 
      2.   
  
  
  
    2. const createPost = () => { 
      3.   
  
  
  
    3.       axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({ 
      4.   
  
  
  
    4.           title: 'foo', 
      5.   
  
  
  
    5.           body: 'bar', 
      6.   
  
  
  
    6.           userId: 1, 
      7.   
  
  
  
    7.       })).then(response => { 
      8.   
  
  
  
    8.         console.log(response) 
      9.   
  
  
  
    9.       }) 
      10.   
  
  
  
    10. } 
      11.

    單擊按鈕試一下，可以看到控制臺(tái)輸出了大量信息，告訴我們 POST 請(qǐng)求已成功完成。

    用 Axios 編寫可復(fù)用的 API 調(diào)用

    在項(xiàng)目中通過創(chuàng)建一個(gè) src/services 目錄，用它來組織所有 api 調(diào)用。

    目錄中包含 2 種類型的文件：

    • API.js ：用來創(chuàng)建一個(gè)帶有定義的 baseURL 的 Axios 實(shí)例，這個(gè)實(shí)例會(huì)用于所有的路由
    • *{specific functionality}*API.js ：更具體的文件，可用于將 api 調(diào)用組織成可重用的模塊

    這樣做的好處是可以方便的在開發(fā)和生產(chǎn)服務(wù)器之間進(jìn)行切換，只需修改一小段代碼就行了。

    創(chuàng)建 services/API.js 文件，并將 Axios baseURL 設(shè)置為默認(rèn)為 Kanye REST API。

     
 
 
 
      
  
  
  
  
    1. API.jsimport axios from 'axios' 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. export default(url='https://api.kanye.rest') => { 
      4.   
  
  
  
    4.     return axios.create({ 
      5.   
  
  
  
    5.         baseURL: url, 
      6.   
  
  
  
    6.     }) 
      7.   
  
  
  
    7. } 
      8.

    接下來創(chuàng)建一個(gè) KanyeAPI.js 文件并從 ./API 中導(dǎo)入 API。在這里我們要導(dǎo)出不同的 API 調(diào)用。

    調(diào)用 API() 會(huì)給得到一個(gè) Axios 實(shí)例，可以在其中調(diào)用 .get 或 .post。

     
 
 
 
      
  
  
  
  
    1. //KanyeAPI.js 
      2.   
  
  
  
    2. import API from './API' 
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4. export default { 
      5.   
  
  
  
    5.     getQuote() { 
      6.   
  
  
  
    6.         return API().get('/') 
      7.   
  
  
  
    7.     }, 
      8.   
  
  
  
    8. } 
      9.

    然后在 App.vue 內(nèi)部，讓我們的組件通過可復(fù)用的 API 調(diào)用來使用這個(gè)新文件，而不是自己再去創(chuàng)建 Axios。

     
 
 
 
      
  
  
  
  
    1. //App.vue 
      2.   
  
  
  
    2. const loadQuote = async () => { 
      3.   
  
  
  
    3.       try { 
      4.   
  
  
  
    4.         const response = await KanyeAPI.getQuote() // <--- THIS LINE 
      5.   
  
  
  
    5.         quote.value = response.data.quote 
      6.   
  
  
  
    6.       } catch (err) { 
      7.   
  
  
  
    7.         console.log(err) 
      8.   
  
  
  
    8.       } 
      9.   
  
  
  
    9. } 
      10.

    下面把 createPost 移到其自己的可重用方法中。

    回到 KanyeAPI.js 在導(dǎo)出默認(rèn)設(shè)置中添加 createPost，這會(huì)將 POST 請(qǐng)求的數(shù)據(jù)作為參數(shù)傳遞給我們的 HTTP 請(qǐng)求。

    與GET請(qǐng)求類似，通過 API 獲取 axios 實(shí)例，但這次需要覆蓋默認(rèn) URL 值并傳遞 JSONplaceholder url。然后就可以像過去一樣屌用 Axios POST 了。

     
 
 
 
      
  
  
  
  
    1. //KanyeAPI.js 
      2.   
  
  
  
    2. export default { 
      3.   
  
  
  
    3.     getQuote() { 
      4.   
  
  
  
    4.         return API().get('/') 
      5.   
  
  
  
    5.     }, 
      6.   
  
  
  
    6.     createPost(data) { 
      7.   
  
  
  
    7.         return API('https://jsonplaceholder.typicode.com/').post('/posts', data) 
      8.   
  
  
  
    8.     } 
      9.   
  
  
  
    9. } 
      10.

    如此簡(jiǎn)單！

    回到 App.vue ，可以像這樣調(diào)用新的 post 方法。

     
 
 
 
      
  
  
  
  
    1. //App.vue  
      2.   
  
  
  
    2. const createPost = () => { 
      3.   
  
  
  
    3.       const response = await KanyeAPI.createPost(JSON.stringify({ 
      4.   
  
  
  
    4.           title: 'foo', 
      5.   
  
  
  
    5.           body: 'bar', 
      6.   
  
  
  
    6.           userId: 1, 
      7.   
  
  
  
    7.       })) 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.       console.log(response) 
      10.   
  
  
  
    10. } 
      11.

    現(xiàn)在單擊按鈕時(shí)，可以看到專用的 API 能夠正常工作。

    把 API 調(diào)用移出這些 Vue 組件并放在它自己的文件的好處在于，可以在整個(gè)程序中的任何位置使用這些 API 調(diào)用。這樣可以創(chuàng)建更多可重用和可伸縮的代碼。

    最終代碼

     
 
 
 
      
  
  
  
  
    1. // App.vue 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. //API.js 
      2.   
  
  
  
    2. import axios from 'axios' 
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4. export default(url='https://api.kanye.rest') => { 
      5.   
  
  
  
    5.     return axios.create({ 
      6.   
  
  
  
    6.         baseURL: url, 
      7.   
  
  
  
    7.     }) 
      8.   
  
  
  
    8. } 
      9.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. //KanyeAPI.js 
      2.   
  
  
  
    2. import API from './API' 
      3.   
  
  
  
    3. export default { 
      4.   
  
  
  
    4.     getQuote() { 
      5.   
  
  
  
    5.         return API().get('/') 
      6.   
  
  
  
    6.     }, 
      7.   
  
  
  
    7.     createPost(data) { 
      8.   
  
  
  
    8.         return API('https://jsonplaceholder.typicode.com/').post('/posts', data) 
      9.   
  
  
  
    9.     } 
      10.   
  
  
  
    10. } 
      11.

     


    文章標(biāo)題：在Vue中用Axios異步請(qǐng)求API
    標(biāo)題URL：http://www.dlmjj.cn/article/djdsdej.html