fetch和axios接口調用方式的用法

2020-12-10 兔哥學前端

前端接口調用的幾種方式 ，有原生ajax ，基於jQuery的ajax ，fetch ，axios關於原生ajax ，基於jQuery的ajax都已經簡單介紹過，下面來看看es6接口調用方式

fetch

Fetch API是新的ajax解決方案 Fetch會返回Promise ，fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象 ，方法：fetch(url, options).then(）

HTTP協議，它給我們提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT

默認的是 GET 請求需要在 options 對象中 指定對應的 method method:請求使用的方法post 和 普通 請求的時候 需要在options 中 設置 請求頭 headers 和 body

fetch接口調用的方式

axios

是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生Ajax的封裝，只不過它是Promise的實現版本它支持：

支持瀏覽器和node.js支持promise能攔截請求和響應自動轉換JSON數據能轉換請求和響應數據axios基礎用法

如果是get和 delete請求傳遞參數時

如果通過傳統的url 以 ？ 的形式傳遞參數如果通過restful 形式傳遞參數也可以通過params 形式傳遞參數

get和 delete請求傳遞參數方式

如果是post 和 put 請求傳遞參數時

通過選項傳遞參數通過 URLSearchParams 傳遞參數

post 和 put 請求傳遞參數方式

像上圖例裡面我們每個接口都可能有接口請求地址 ，接口地址的前部分（從http到：3000/ ）基本都是公共部分 ，那麼我們就能設置公共的請求地址URL ，這就需要全局配置

axios 全局配置

公共部分統一設置全局可用

例如：

設置公共的請求地址URL

axios 攔截器

請求攔截器例如在每個請求體裡加上token，統一做了處理如果以後要改也非常容易請求攔截器的作用是在請求發送前進行一些操作響應攔截器例如在伺服器返回登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁響應攔截器的作用是在接收到響應後進行一些操作

axios 攔截器

es6中async 函數 和 await的用法

1.async作為一個關鍵字放到函數前面

任何一個async函數都會隱式返回一個promise

2.await關鍵字只能在使用async定義的函數中使用

await後面可以直接跟一個 Promise實例對象

await函數不能單獨使用必須配合async使用

返回一個promise實例對象
對比請求方式更加簡化

所以他的優點：async/await 讓異步代碼看起來、表現起來更像同步代碼 ，簡化異步操作

在vue實際開發中也可以簡化操作來用

axios同時請求多個api

axios同時請求多個api

async/await處理多個異步任務

async/await處理多個異步任務會簡單

相關焦點

  • Fetch還是Axios,哪個更適合HTTP請求?
    幾年前，大多數應用程式都使用Ajax發送HTTP請求，Ajax代表異步JavaScript和XML。但是現在，開發人員通常會決定在 .fetch() API和Axios之間進行選擇。在本文中，我想比較這兩種方法，並簡要介紹一下基本知識和語法。除此之外，我還將比較在兩種情況下以及在錯誤處理中將數據轉換為jsON格式的過程。我還將討論HTTP攔截和下載進度。
  • Fetch還是Axios——哪個更適合HTTP請求?
    幾年前，大多數應用程式都使用Ajax發送HTTP請求，Ajax代表異步Javascript和XML。但是現在，開發人員通常會決定在fetch() API和Axios之間進行選擇。在本文中，我想比較這兩種方法，並簡要介紹一下基本知識和語法。除此之外，我還將比較在兩種情況下以及在錯誤處理中將數據轉換為JSON格式的過程。我還將討論HTTP攔截和下載進度。
  • 如何使用Fetch在JavaScript中進行AJAX調用
    我們將介紹JS基礎知識，瀏覽器，DOM，系統設計，域體系結構和框架。Fetch是用於在JavaScript中發出AJAX請求的接口。它由現代瀏覽器廣泛實現，並用於調用API。調用fetch返回帶有響應對象的Promise。如果出現網絡錯誤，則將拒絕訪問；如果連接到伺服器沒有問題，並且伺服器響應了狀態代碼，則可以解決諾言。此狀態碼可以是200s，400s或500s。
  • vue中簡單的axios二次封裝
    現在vue時代已經到來，axios 和 fetch都已經開始分別搶佔「請求」這個前端高地。本文將會嘗試著闡述他們之間的區別，並給出自己的一些理解。2）基於原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案。
  • 如何在H5APP調用支付寶接口進行付款
    各類手機網站或APP亦如此，當今最火爆的兩大支付巨頭，分別是支付寶和微信。今天我們就會帶來如何在H5APP中調用支付寶接口進行付款。（微信支付和支付寶付款幾乎大同小異）1.創建應用要調用支付寶支付，需要註冊支付寶開發者帳號，有了帳號才可以調用支付接口https://open.alipay.com/platform/developerIndex.htm
  • 【vue2.0進階】用axios來實現數據請求,簡單易用
    我們來看看作者給出的解釋，原話如下：最近團隊討論了一下，Ajax 本身跟 Vue 並沒有什麼需要特別整合的地方，使用 fetchpolyfill 或是 axios、superagent 等等都可以起到同等的效果
  • 你不知道的 Axios 源碼完整解析
    背景日常開發中我們經常跟接口打交道，而在現代標準前端框架(Vue/React)開發中，離不開的是 axios，出於好奇閱讀了一下源碼。.)request 方法是入口，axios/axios.get 等調用都會走進 request 進行處理請求數據轉換器，對傳入的參數 data 和 header 做數據處理，比如 JSON.stringify(data)適配器，判斷是瀏覽器端還是 node 端，執行不同的方法響應數據轉換器，對服務端的數據進行處理，比如 JSON.parse(data)響應攔截器，對服務端數據做處理，比如 token
  • 在 Vue 中用 Axios 異步請求API
    Axios 的錯誤處理在 async-await 模式中，可以通過 try 和 catch 來為 API 調用添加錯誤處理：他們的文檔中提供了一個測試 POST 請求的  /posts  接口。這個方法，類似於前面的 GET 請求，只需要調用 axios.post 並傳入URL（即https://jsonplaceholder.typicode.com/posts ）就可以複製粘貼文檔中的數據了。
  • JavaScript進階之Ajax的問題和什麼是promise
    前端接口調用的幾種方式 ，有原生ajax ，基於jQuery的ajax ，fetch ，axios ，原生ajax的原理和基本使用我們已經介紹過了 ，下面來看看基於jQuery的ajax的運用以及Ajax的問題基於jQuery的AjaxjQuery為我們提供了更強大的更進一步的原生
  • fetch() 與 JSON 的碰撞
    JSON是一種結構化數據的簡單格式，下面是一個包含帶有 props 和 values 的對象的 JSON 示例：
  • 1024專屬視頻 | 前端視頻:基礎入門、axios、Promise、mpvue項目實戰
    除此之外，課程涵蓋大量的CSS技巧、動畫、交互效果，對傳統浮動和定位的布局方式，以及CSS3中的彈性盒和響應式布局都有深入講解。本視頻教程從基本的HTTP請求協議開始，到封裝XHR定義簡潔版axios；從axios的基本語法使用，到難點技術使用分析，最後進行axios源碼的深入分析，幫助學習者深入掌握axios技術。
  • 關於調用接口的詳細說明
    第二步，打開谷歌插件PostMan調用接口（先調用獲取access_token的接口，在調用獲取電站信息列表的接口）。請使用這個顏色的PostMan插件奧！！第一步 ，調用獲取access_token的接口，調用地址為 ：http://api.wyqcd.net:8004/OAuth/Token，在Header中配置請求方式Content-Type為application/x-www-form-urlencoded，以Post方式請求，配置Post參數，client_id：telds7t15qrwgw7gu5owclient_secret：
  • C++中是如何調用C接口的?
    前言如何在C++代碼中調用寫好的C接口?你可能會奇怪，C++不是兼容C嗎?直接調用不就可以了?這裡我們先按下不表，先看看C++如何調用C代碼接口。或者說C++生成函數籤名的方式與C不一致，所以即便是函數名一樣，對於C和C++來說，它們最終的函數籤名還是不一樣。當然這裡又是另外一回事了，我們不細說。
  • Vue與axios的完美結合
    如今也是時候來一波技術換新，axios真香~介紹前一陣子我也使用過axios，當時的想法很簡單，axios更專注於數據交互。放棄的理由也很簡單，不熟悉，使用起來不順手。但當我再次去關注axios的時候，才發現它真的魅力四射啊！
  • TypeScript 重構 Axios 經驗分享
    所以 axios 的類型是 function，不是 object。但由於 function 也是 Object 所以可以設置屬性和方法。於是 axios 既可以表現的像實例，又可以直接函數調用axios(config)。