前端異步請求axios的介紹與用法


官網

http://www.axios-js.com/

axios 是什么

     1.    Axios 是一個基於 promise  HTTP ,可以用在瀏覽器和 node.js 中。目前是前端最流行的 ajax 請求庫

     2.     react/vue 官方都推薦使用 axios  ajax 請求

axios是干啥的

  上古瀏覽器頁面在向服務器請求數據時,因為返回的是整個頁面的數據,頁面都會強制刷新一下,這對於用戶來講並不是很友好。並且我們只是需要修改頁面的部分數據,但是從服務器端發送的卻是整個頁面的數據,十分消耗網絡資源。而我們只是需要修改頁面的部分數據,也希望不刷新頁面,因此異步網絡請求就應運而生。

Ajax(AsynchronousJavaScript and XML):異步網絡請求。Ajax能夠讓頁面無刷新的請求數據。實現ajax的方式有多種,如jQuery封裝的ajax,原生XMLHttpRequest,以及axios。但各種方式都有利弊。(一)原生的XMLHttpRequest的配置和調用方式都很繁瑣,實現異步請求十分麻煩。(二)jQuery的ajax相對於原生的ajax是非常好用的,但是沒有必要因為要用ajax異步網絡請求而引用jQuery框架。

axios

其可以理解為ajax i/o system,這不是一種新技術,本質上還是對原生XMLHttpRequest的封裝,可用於瀏覽器和nodejs的HTTP客戶端,只不過它是基於Promise的,符合最新的ES規范。具備以下特點:

1.     基於 promise 的異步 ajax 請求庫,支持promise所有的API

2.     瀏覽器端/node 端都可以使用,瀏覽器中創建XMLHttpRequests

3.     支持請求/響應攔截器

4.     支持請求取消

5.     可以轉換請求數據和響應數據,並對響應回來的內容自動轉換成 JSON類型的數據

6.     批量發送多個請求

7.     安全性更高,客戶端支持防御 XSRF,就是讓你的每個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略,假冒的網站是拿不到你cookie中得key,這樣,后台就可以輕松辨別出這個請求是否是用戶在假冒網站上的誤導輸入,從而采取正確的策略。

可以使用原生XMLHttpRequest實現ajax請求

如下圖:

axios介紹:

axios是基於Promise的,因此可以使用Promise API

axios 常用語法

·       axios(config): 通用/最本質的發任意類型請求的方式

·       axios(url[, config]): 可以只指定 url 發 get 請求

·       axios.request(config): 等同於 axios(config)

·       axios.get(url[, config]): 發 get 請求

·       axios.delete(url[, config]): 發 delete 請求

·       axios.post(url[, data, config]):發 post 請求

·       axios.put(url[, data, config]): 發 put 請求

·       axios.defaults.xxx: 請求的默認全局配置

·       axios.interceptors.request.use():添加請求攔截器

·       axios.interceptors.response.use():添加響應攔截器

·       axios.create([config]): 創建一個新的 axios(它沒有下面的功能)

·       axios.Cancel(): 用於創建取消請求的錯誤對象

·       axios.CancelToken(): 用於創建取消請求的 token 對象

·       axios.isCancel(): 是否是一個取消請求的錯誤

·       axios.all(promises): 用於批量執行多個異步請求

·       axios.spread(): 用來指定接收所有成功數據的回調函數的方法


最基礎用法發送GET請求:

最基礎用法發送POST請求:

同時,axios支持發送並發請求:通過axios.all(iterable)可實現發送多個請求,參數不一定是數組,只要有iterable接口就行,函數返回的是一個數組axios.spread(callback)可用於將結果數組展開:

 axios(config)可通過設置一些屬性來發送請求

可用axios,create([config])來創建一個新的實例,並設置相關屬性

全局默認設置

全局默認設置是指給axios添加一些默認設置,如baseURL等,后面發送請求時,所有請求都會帶上這些設置

攔截器interceptors

攔截器是指當發送請求或者得到響應被then或catch處理之前對它們進行攔截,攔截后可對數據做一些處理,比如給請求數據添加頭部信息,或對響應數據進行序列化,然后再傳給瀏覽器,這些都可以在攔截器中進行

axios為什么既能在瀏覽器環境運行又能在服務器(node)環境中運行?

axios在瀏覽器端使用XMLHttpRequest對象發送ajax請求;在node環境使用http對象發送ajax請求。

axios相比原生ajax的缺點

ajax的缺點

·       本身是針對MVC的編程,不符合現在前端MVVM的浪潮

·       基於原生的XHR開發,XHR本身的架構不清晰。

·       JQuery整個項目太大,單純使用ajax卻要引入整個JQuery非常的不合理(采取個性化打包的方案又不能享受CDN服務)

·       不符合關注分離(Separation ofConcerns)的原則

·       配置和調用方式非常混亂,而且基於事件的異步模型不友好。

 

 

來源:https://mp.weixin.qq.com/s/FNFuk-0uHqHN2hbsbaH0sA

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM