vue全家桶進階之路8:Axios的安裝與HTTP請求實戰

来源:https://www.cnblogs.com/beichengshiqiao/archive/2023/03/28/17263846.html
-Advertisement-
Play Games

Axios是一個基於Promise的HTTP客戶端,用於在瀏覽器和Node.js中發送HTTP請求。它可以使用在Vue中發送請求以及與後端API進行交互。 在Vue中使用Axios可以通過以下步驟: 安裝Axios 可以通過npm或yarn來安裝Axios:npm install axios yar ...


Axios是一個基於Promise的HTTP客戶端,用於在瀏覽器和Node.js中發送HTTP請求。它可以使用在Vue中發送請求以及與後端API進行交互。

在Vue中使用Axios可以通過以下步驟:

  1. 安裝Axios

    可以通過npm或yarn來安裝Axios:npm install axios yarn add axios    

    

npm install axios

yarn add axios

 

    

  1. 引入Axios

    在需要使用Axios的文件中,可以通過以下方式引入:    

import axios from 'axios'

 

 
  1. 使用Axios

    發送GET請求:

    

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

 

    發送POST請求:

    

axios.post('https://jsonplaceholder.typicode.com/users', {
    name: 'John Doe',
    email: '[email protected]'
  })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

 

以上是使用Axios的基本方法,可以通過Axios的文檔來瞭解更多的使用方法和配置選項。

 

疑問解答,理解更透徹:

1、.then(response => { console.log(response.data) })是什麼意思?

.then(response => {console.log(response.data)}) 表示一個 Promise 對象的成功回調函數。當 Promise 對象的狀態變為 resolved(已完成)時,會執行 .then() 中傳入的回調函數,並將 Promise 對象成功後返回的值作為回調函數的參數 response,在這裡 response 中包含了從伺服器返回的響應數據。

在這個例子中,我們使用 Axios 發送了一個 GET 請求,當請求成功時,響應數據會包含在 response 對象中,我們通過 console.log(response.data) 將響應數據列印到控制臺中。

需要註意的是,.then() 可以鏈式調用多個,每個 .then() 都會接收前一個 .then() 返回的結果作為參數。而如果 Promise 對象的狀態變為 rejected(已失敗),則會執行 .catch() 中傳入的回調函數。

 

2、response => { console.log(response.data) }什麼意思?

response => {console.log(response.data)} 是一個箭頭函數,也可以寫成 function(response) {console.log(response.data)} 的形式。

這個箭頭函數的作用是處理 Promise 對象成功後的響應數據。其中 response 是從伺服器返回的響應數據,通過 response.data 可以獲取響應數據的內容。

在這個例子中,我們使用 Axios 發送了一個 GET 請求,當請求成功時,Axios 會將響應數據封裝成一個 Promise 對象,並將這個 Promise 對象的成功回調函數設置為 response => {console.log(response.data)}。也就是說,當請求成功時,這個箭頭函數就會被調用,並將從伺服器返回的響應數據 response 中的 data 屬性列印到控制臺中。

 

3、export const getDevelopers = () => {什麼意思?

export const getDevelopers = () => { ... } 是一個導出函數的語法,意味著該函數可以被其他文件導入並調用。

在這個例子中,getDevelopers 函數是一個箭頭函數,沒有參數。它的作用是向伺服器發送一個請求,獲取開發者的信息。具體的實現可能包括以下步驟:

  • 導入 Axios:  
import axios from 'axios'
  • 發送請求:
export const getDevelopers = () => {
  return axios.get('/api/developers')
    .then(response => {
      return response.data
    })
    .catch(error => {
      console.log(error)
    })
}

在這個例子中,我們使用了 Axios 發送了一個 GET 請求,請求的地址是 /api/developers。當請求成功時,.then() 中的回調函數將會被執行,返回從伺服器返回的響應數據 response.data。如果請求失敗,則會執行 .catch() 中的回調函數,列印錯誤信息到控制臺中。

最後,export 關鍵字將這個函數導出,使其可以被其他文件導入並調用。其他文件可以通過 import { getDevelopers } from './api' 的方式導入 getDevelopers 函數,並調用它來獲取開發者的信息。

 

4、= () =>什麼意思?

= () => 是一個箭頭函數的語法,表示定義一個匿名函數並賦值給一個變數或常量。

箭頭函數是 ES6 引入的新語法,它的語法比傳統的函數表達式更加簡潔。箭頭函數使用箭頭符號 => 來定義函數,語法如下:

() => { ... }

 

箭頭函數沒有 function 關鍵字,參數列表放在圓括弧中,函數體放在大括弧中,如果函數體只有一條語句,可以省略大括弧和 return 關鍵字。在這個例子中,箭頭函數沒有參數,因此圓括弧中是空的,函數體中包含了具體的實現代碼。

將箭頭函數賦值給一個變數或常量,可以使得這個函數可以被其他代碼調用,例如:

const greet = () => {
  console.log('Hello, World!')
}

greet()  // 輸出:Hello, World!

在這個例子中,我們定義了一個名為 greet 的常量,並將一個箭頭函數賦值給它。當調用 greet() 時,箭頭函數將會被執行,輸出 Hello, World! 到控制臺中。

5、greet = () =>中間的括弧是什麼意思?

greet = () => { ... } 中的圓括弧 () 是箭頭函數的參數列表,它表示這個箭頭函數沒有參數。

箭頭函數的參數列表放在圓括弧中,如果沒有參數,圓括弧就是空的。例如:

const greet = () => {
  console.log('Hello, World!')
}

const add = (x, y) => {
  return x + y
}

在上面的例子中,greet 是一個不帶參數的箭頭函數,它的函數體輸出一條字元串到控制臺中。而 add 是一個帶有兩個參數的箭頭函數,它的函數體計算這兩個參數的和並返回結果。

當調用箭頭函數時,如果有參數,就需要將這些參數傳遞給函數。例如:

greet()           // 輸出:Hello, World!
console.log(add(2, 3))  // 輸出:5

在這個例子中,我們分別調用了 greetadd 兩個箭頭函數,因為 greet 沒有參數,所以我們直接調用它即可;而 add 接受兩個參數,我們需要將這兩個參數傳遞給它,並通過 console.log() 輸出返回的結果。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 其他章節請看: webgl 系列 著色器語言 本篇開始學習著色器語言 —— GLSL全稱是 Graphics Library Shader Language (圖形庫著色器語言) GLSL 是一門獨立的語言,和其他語言一樣有自己的變數、運算符、函數、迴圈(for)、控制語句(if)、函數、數組等等。 ...
  • 本博文介紹HTML中的表單標簽,包含form表單域、input輸入表單、label標簽、select下拉表單和textarea文本域。 ...
  • ECMAScript(簡稱 ES)是一種由 Ecma 國際組織定義的腳本語言標準,它定義了 JavaScript 語言的基本規範和特性。JavaScript 是一種基於 ECMAScript 標準的編程語言,因此 ECMAScript 對於 JavaScript 開發來說非常重要。 ECMAScri ...
  • TS:是JS的超集,即對JS的擴展,主要提供了類型系統和對ES6+的支持,但TS最終會轉換為js代碼去執行。 特點: 1. 始於JavaScript, 歸於JavaScript 2. 強大的類型系統 3. 先進的JavaScript | | TypeScript | JavaScript | | | ...
  • Vue.js 是一個前端開發框架,它可以幫助我們快速構建單頁應用和複雜的交互界面。而 Webpack 則是一個前端資源打包工具,它可以將多個 JavaScript、CSS、HTML、圖片等資源打包成一個或多個文件,並提供模塊化載入、壓縮、混淆等功能,以便於前端開發和部署。 在使用 Vue.js 開發 ...
  • 作為 C 端前端研發,除了攻剋業務難點以外,也要有更深層的自我目標,那就是性能優化。這事兒說大不大,說小也不小,但難度絕對不一般,所涉及的範圍優化點深入工程每個細胞。做好前端性能優化絕非簡單之事!文章主要內容介紹前端性能考核指標及優化方案。 ...
  • Vue Router 是 Vue.js 的官方路由管理器,它可以幫助我們實現單頁應用(Single Page Application,SPA)的前端路由。 Vue Router 基於 Vue.js 的組件化思想,將路由視為組件,並提供了多種方式來定義路由和渲染組件。Vue Router 可以通過 U ...
  • 解釋器模式(Interpreter Pattern):是一種行為型設計模式,它可以用來解決一些特定問題,例如編譯器、計算器等等。這種模式定義了一個語言的語法,並用一個解釋器來解釋語言中的表達式。 解釋器模式可以用來處理例如數據格式化、表單驗證等業務場景。在這些場景中,我們需要定義一些語法規則,然後使 ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...