使用AxiosJavaScript中的簡單HTTP請求

Interested in learning JavaScript? Get my ebook at jshandbook.com

有興趣學習JavaScript嗎? 在jshandbook.com上獲取我的電子書

介紹 (Introduction)

Axios is a very popular JavaScript library you can use to perform HTTP requests. It works in both Browser and Node.js platforms.

Axios是一個非常流行JavaScript庫,可用于執行HTTP請求。 它可以在Browser和Node.js平臺中使用。

Is supports all modern browsers, including IE8 and higher.

支持所有現代瀏覽器,包括IE8和更高版本。

It is promise-based, and this lets us write async/await code to perform XHR requests very easily.

它是基于Promise的,這使我們可以編寫異步/等待代碼來非常輕松地執行XHR請求。

Using Axios has quite a few advantages over the native Fetch API:

與本地Fetch API相比,使用Axios具有很多優勢:

  • supports older browsers (Fetch needs a polyfill)

    支持較舊的瀏覽器(獲取需要使用polyfill)
  • has a way to abort a request

    有辦法中止請求
  • has a way to set a response timeout

    有辦法設置響應超時
  • has built-in CSRF protection

    內置CSRF保護
  • supports upload progress

    支持上傳進度
  • performs automatic JSON data transformation

    執行自動JSON數據轉換
  • works in Node.js

    在Node.js中工作

安裝 (Installation)

Axios can be installed using npm:

可以使用npm安裝Axios:

npm install axios

or yarn:

或紗線 :

yarn add axios

or simply include it in your page using unpkg.com:

或使用unpkg.com將其包含在您的頁面中:

<script src="https://unpkg.com/axios/dist/axios.min.js"><;/script>

Axios API (The Axios API)

You can start an HTTP request from the axios object:

您可以從axios對象啟動HTTP請求:

axios({  url: 'https://dog.ceo/api/breeds/list/all',  method: 'get',  data: {    foo: 'bar'  }})

but for convenience, you will generally use

但是為了方便起見,您通常會使用

  • axios.get()

    axios.get()

  • axios.post()

    axios.post()

(like in jQuery, you would use $.get() and $.post() instead of $.ajax())

(就像在jQuery中一樣,您將使用$.get()$.post()而不是$.ajax() )

Axios offers methods for all the HTTP verbs, which are less popular but still used:

Axios提供了用于所有HTTP動詞的方法,這些方法不太流行但仍在使用:

  • axios.delete()

    axios.delete()

  • axios.put()

    axios.put()

  • axios.patch()

    axios.patch()

  • axios.options()

    axios.options()

It also offers a method to get the HTTP headers of a request, discarding the body.

它還提供了一種獲取請求的HTTP標頭,丟棄正文的方法。

GET請求 (GET requests)

One convenient way to use Axios is to use the modern (ES2017) async/await syntax.

使用Axios的一種便捷方法是使用現代(ES2017)異步/等待語法。

This Node.js example queries the Dog API to retrieve a list of all the dog breeds, using axios.get(), and it counts them:

此Node.js示例使用axios.get()查詢Dog API以檢索所有犬種的列表,并對其進行計數:

const axios = require('axios')const getBreeds = async () => {  try {    return await axios.get('https://dog.ceo/api/breeds/list/all')  } catch (error) {    console.error(error)  }}const countBreeds = async () => {  const breeds = await getBreeds()  if (breeds.data.message) {    console.log(`Got ${Object.entries(breeds.data.message).length} breeds`)  }}countBreeds()

If you don’t want to use async/await, you can use the Promises syntax:

如果您不想使用異步/等待,則可以使用Promises語法:

const axios = require('axios')const getBreeds = () => {  try {    return axios.get('https://dog.ceo/api/breeds/list/all')  } catch (error) {    console.error(error)  }}const countBreeds = async () => {  const breeds = getBreeds()    .then(response => {      if (response.data.message) {        console.log(          `Got ${Object.entries(response.data.message).length} breeds`        )      }    })    .catch(error => {      console.log(error)    })}countBreeds()

向GET請求添加參數 (Add parameters to GET requests)

A GET response can contain parameters in the URL, like this: https://site.com/?foo=bar.

GET響應可以在URL中包含參數,例如: https://site.com/?foo=bar : https://site.com/?foo=bar

With Axios you can perform this by simply using that URL:

使用Axios,您只需使用以下URL即可執行此操作:

axios.get('https://site.com/?foo=bar')

or you can use a params property in the options:

或者您可以在選項中使用params屬性:

axios.get('https://site.com/', {  params: {    foo: 'bar'  }})

POST請求 (POST Requests)

Performing a POST request is just like doing a GET request, but instead of axios.get, you use axios.post:

執行POST請求就像做一個GET請求,但不是axios.get ,您使用axios.post

axios.post('https://site.com/')

An object containing the POST parameters is the second argument:

包含POST參數的對象是第二個參數:

axios.post('https://site.com/', { foo: 'bar' })

Interested in learning JavaScript? Get my ebook at jshandbook.com

有興趣學習JavaScript嗎? 在jshandbook.com上獲取我的電子書

翻譯自: https://www.freecodecamp.org/news/simple-http-requests-in-javascript-using-axios-272e1ac4a916/

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/394505.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/394505.shtml
英文地址,請注明出處:http://en.pswp.cn/news/394505.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Linux中通過命令直接刪除文件中最后一行

何謂Sed(Stream EDitor):Sed原為UNIX系統上的非交談式文字編輯器(non-interactive stream editor)。當Sed讀入待編輯文件&#xff0c;會依編輯命令來進行文件的編輯工作。sed -i $d file如同其它UNIX的指令一般&#xff0c;Sed亦是由標準輸入(standard input)讀入欲編輯的文件&…

vb獲取數組長度_如何實現數組的二分查找

二分查找是一種極其高效、簡練的查找算法&#xff0c;它不僅簡單&#xff0c;易用&#xff0c;而且還非常的高效。相對于順序查找&#xff0c;二分查找在效率是呈現指數性提升&#xff0c;數據量越大&#xff0c;越能體現出二分查找法的優勢。二分查找的查找過程是&#xff1a;…

400錯誤返回了服務器信息,使用Spring MVC,接受JSON錯誤的POST請求會導致返回默認的400錯誤代碼服務器頁面...

我正在使用RESTAPI。接收到帶有錯誤JSON的POST消息(例如{sdfasdfasdf})會使Spring返回默認服務器頁面&#xff0c;以顯示400錯誤請求錯誤。我不想返回頁面&#xff0c;我想返回自定義JSON錯誤對象。當使用ExceptionHandler引發異常時&#xff0c;可以執行此操作。因此&#xff…

【Python】list和tuple 區別比較

列表 List classmates [Michael, Bob, Tracy] 元組 Tuple tuple一旦初始化就不能修改&#xff0c;比如同樣是列出同學的名字&#xff1a; >>> classmates (Michael, Bob, Tracy) 現在&#xff0c;classmates這個tuple不能變了&#xff0c;它也沒有append()&#xff…

leetcode315. 計算右側小于當前元素的個數(樹狀數組解法)

leetcode315. 計算右側小于當前元素的個數(樹狀數組解法) 題目&#xff1a;給定一個整數數組 nums&#xff0c;按要求返回一個新數組 counts。數組 counts 有該性質&#xff1a; counts[i] 的值是 nums[i] 右側小于 nums[i] 的元素的數量。 樹狀數組解法 java class Solution …

洛谷 P1101 單詞方陣

給一nn的字母方陣&#xff0c;內可能蘊含多個“yizhong”單詞。單詞在方陣中是沿著同一方向連續擺放的。擺放可沿著 8個方向的任一方向&#xff0c;同一單詞擺放時不再改變方向&#xff0c;單詞與單詞之間可以交叉,因此有可能共用字母。輸出時&#xff0c;將不是單詞的字母用*代…

從頭學習計算機網絡_如何從頭開始構建三層神經網絡

從頭學習計算機網絡by Daphne Cornelisse達芙妮康妮莉絲(Daphne Cornelisse) 如何從頭開始構建三層神經網絡 (How to build a three-layer neural network from scratch) In this post, I will go through the steps required for building a three layer neural network. I’…

python 文件處理

f open(chenli.txt) #打開文件 first_line f.readline() print(first line:,first_line) #讀一行 print(我是分隔線.center(50,-)) data f.read() # 讀取剩下的所有內容,文件大時不要用 print(data) #打印讀取內容f.close() #關閉文件1…

第五章 MVC之Bundle詳解

一、簡述 Bundle&#xff0c;英文原意就是捆、收集、歸攏。在MVC中的Bundle技術&#xff0c;也就是一個對css和js文件的捆綁壓縮的技術。 它的用處&#xff1a; 將多個請求捆綁為一個請求&#xff0c;減少服務器請求數 壓縮javascript&#xff0c;css等資源文件&#xff0c;減小…

所給服務器端程序改寫為能夠同時響應多個客戶端連接請求的服務器程序_一文讀懂客戶端請求是如何到達服務器的...

點擊上方“藍色字體”&#xff0c;選擇 “設為星標”關鍵訊息&#xff0c;D1時間送達&#xff01;互聯網是人類歷史上最偉大的發明創造之一&#xff0c;而構成互聯網架構的核心在于TCP/IP協議。那么TCP/IP是如何工作的呢&#xff0c;我們先從數據包開始講起。1、數據包一、HTTP…

消息服務器 推送技術,SSE服務器推送技術

SSE即 server send event 服務器發送事件&#xff0c;在在早期可能會使用ajax向服務器輪詢的方式&#xff0c;使瀏覽器第一時間接受到服務器的消息&#xff0c;但這種頻率不好控制&#xff0c;消耗也比較大。但是對于SSE來說&#xff0c;當客戶端向服務端發送請求&#xff0c;服…

Contest2162 - 2019-3-28 高一noip基礎知識點 測試5 題解版

傳送門 T1 單調棧 按照b排序 在家每一個物品時&#xff0c;判斷一下a和b的關系 如果s[sta[top]].a>s[i].b&#xff0c;就彈棧 記錄所有時候的height&#xff0c;并取最大值 T2 單調棧裸題 單調棧是干什么的&#xff1f;&#xff1f; 單調棧是記錄一個數的一側的第一個比他大…

在package.json里面的script設置環境變量,區分開發及生產環境。注意mac與windows的設置方式不一樣...

在package.json里面的script設置環境變量&#xff0c;區分開發及生產環境。 注意mac與windows的設置方式不一樣。 "scripts": {"publish-mac": "export NODE_ENVprod&&webpack -p --progress --colors","publish-win": "…

leetcode 978. 最長湍流子數組(動態規劃)

978. 最長湍流子數組 當 A 的子數組 A[i], A[i1], …, A[j] 滿足下列條件時&#xff0c;我們稱其為湍流子數組&#xff1a; 若 i < k < j&#xff0c;當 k 為奇數時&#xff0c; A[k] > A[k1]&#xff0c;且當 k 為偶數時&#xff0c;A[k] < A[k1]&#xff1b; 或 …

人工智能取代工作_人工智能正在取代人們的工作-開發人員是下一個嗎?

人工智能取代工作I was recently asked to comment on whether there was any point in becoming a developer right now, because AI might be doing your job very soon.最近有人要求我評論一下現在成為開發人員是否有任何意義&#xff0c;因為AI可能很快就會完成您的工作。 …

python類self_Python類中的self到底是干啥的

Python編寫類的時候&#xff0c;每個函數參數第一個參數都是self&#xff0c;一開始我不管它到底是干嘛的&#xff0c;只知道必須要寫上。后來對Python漸漸熟悉了一點&#xff0c;再回頭看self的概念&#xff0c;似乎有點弄明白了。首先明確的是self只有在類的方法中才會有&…

PHP中關于取模運算及符號

執行程序段<?php echo 8%(-2) ?>&#xff0c;輸出結果是&#xff1a; %為取模運算&#xff0c;以上程序將輸出0 $a%$b,其結果的正負取決于$a的符號。 echo ((-8)%3); //將輸出-2 echo (8%(-3)); //將輸出2轉載于:https://www.cnblogs.com/457248499-qq-com/p…

[pytorch] Pytorch入門

Pytorch入門 簡單容易上手&#xff0c;感覺比keras好理解多了&#xff0c;和mxnet很像&#xff08;似乎mxnet有點借鑒pytorch&#xff09;&#xff0c;記一記。 直接從例子開始學&#xff0c;基礎知識咱已經看了很多論文了。。。 import torch import torch.nn as nn import to…

無線服務器密碼讓別人改了,wifi密碼被改了怎么辦_wifi密碼被別人改了怎么辦?-192路由網...

wifi密碼被別人改了怎么辦&#xff1f;wifi密碼之所以被別人修改&#xff0c;是因為其他人知道了你路由器的登錄密碼。所以&#xff0c;如果發現自己wifi密碼被別人修改了&#xff0c;應該立刻登錄到路由器設置界面&#xff0c;修改路由器登錄密碼、修改wifi密碼、并調整wifi加…

[archlinux][hardware] 查看SSD的使用壽命

因為最近把16GB的SSD做成了HDD的cache&#xff0c;所以比較關系壽命問題。 使用smartctl工具。 參考&#xff1a;https://www.v2ex.com/t/261373 linux 下面只有 smartmontools 這一個工具&#xff0c;而且只對像三喪和 intel 這樣的大廠支持良好&#xff0c;其余的廠家文檔不全…