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
  • 前言 插件化的需求主要源於對軟體架構靈活性的追求,特別是在開發大型、複雜或需要不斷更新的軟體系統時,插件化可以提高軟體系統的可擴展性、可定製性、隔離性、安全性、可維護性、模塊化、易於升級和更新以及支持第三方開發等方面的能力,從而滿足不斷變化的業務需求和技術挑戰。 一、插件化探索 在WPF中我們想要開 ...
  • 歡迎ReaLTaiizor是一個用戶友好的、以設計為中心的.NET WinForms項目控制項庫,包含廣泛的組件。您可以使用不同的主題選項對項目進行個性化設置,並自定義用戶控制項,以使您的應用程式更加專業。 項目地址:https://github.com/Taiizor/ReaLTaiizor 步驟1: ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • Channel 是乾什麼的 The System.Threading.Channels namespace provides a set of synchronization data structures for passing data between producers and consume ...
  • efcore如何優雅的實現按年分庫按月分表 介紹 本文ShardinfCore版本 本期主角: ShardingCore 一款ef-core下高性能、輕量級針對分表分庫讀寫分離的解決方案,具有零依賴、零學習成本、零業務代碼入侵適配 距離上次發文.net相關的已經有很久了,期間一直在從事java相關的 ...
  • 前言 Spacesniffer 是一個免費的文件掃描工具,通過使用樹狀圖可視化佈局,可以立即瞭解大文件夾的位置,幫助用戶處理找到這些文件夾 當前系統C盤空間 清理後系統C盤空間 下載 Spacesniffer 下載地址:https://spacesniffer.en.softonic.com/dow ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 一、ReZero簡介 ReZero是一款.NET中間件 : 全網唯一開源界面操作就能生成API , 可以集成到任何.NET6+ API項目,無破壞性,也可讓非.NET用戶使用exe文件 免費開源:MIT最寬鬆協議 , 一直從事開源事業十年,一直堅持開源 1.1 純ReZero開發 適合.Net Co ...
  • 一:背景 1. 講故事 停了一個月沒有更新文章了,主要是忙於寫 C#內功修煉系列的PPT,現在基本上接近尾聲,可以回頭繼續更新這段時間分析dump的一些事故報告,有朋友微信上找到我,說他們的系統出現了大量的http超時,程式不響應處理了,讓我幫忙看下怎麼回事,dump也抓到了。 二:WinDbg分析 ...
  • 開始做項目管理了(本人3年java,來到這邊之後真沒想到...),天天開會溝通整理需求,他們講話的時候忙裡偷閑整理一下常用的方法,其實語言還是有共通性的,基本上看到方法名就大概能猜出來用法。出去打水的時候看到外面太陽好好,真想在外面坐著曬太陽,回來的時候好兄弟三年前送給我的鍵盤D鍵不靈了,在打"等待 ...