生活随笔
收集整理的這篇文章主要介紹了
Axios 简单使用指南
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
概述
什么是 Axios ？
Axios 是一個(gè)開(kāi)源的基于 promise 的 HTTP 請(qǐng)求庫(kù)，一般常用于瀏覽器和 node.js 中。它能夠在具有相同代碼庫(kù)的瀏覽器和 nodejs 中同時(shí)運(yùn)行，在服務(wù)器側(cè)，它利用服務(wù)器端原生的 node.js http 模塊，而在客戶(hù)端側(cè)（一般是瀏覽器），則使用的是 XMLHttpRequest。
從 Vue 2.0 版本開(kāi)始，就極力推薦使用 Axios 來(lái)進(jìn)行 ajax 請(qǐng)求，其源碼倉(cāng)庫(kù)為：
https://github.com/axios/axios
特性
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請(qǐng)求
- 支持 Promise API
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 支持自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
- 客戶(hù)端側(cè)支持防御 XSRF
Axios 的安裝
Axios 安裝主要有兩種方式，一種是通過(guò)引入 CDN，另一種則是通過(guò) npm 進(jìn)行安裝，兩中安裝的方式介紹如下。
使用 CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
使用 npm
npm install axios
支持的瀏覽器
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-X06QFCcI-1665585598285)(https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)][外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-zkfX0OBo-1665585598286)(https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png)][外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-aapz9VEc-1665585598286)(https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png)]
| Latest ? | Latest ? | Latest ? | Latest ? | Latest ? | 8+ ? |
Axios 的使用
Axios 提供了兩種不同的方式來(lái)發(fā)送 HTTP 請(qǐng)求，其中一種是直接通過(guò) axios() 方法，而另一種則是通過(guò) axios 對(duì)象提供的跟 HTTP 方法對(duì)應(yīng)起來(lái)的方法來(lái)發(fā)起請(qǐng)求，例如：
- axios.get()
- axios.post()
- axios.update()
- axios.put()
- ……
get 請(qǐng)求
axios
.get(url
?key
=value
&key2
=value2
).then(function(response){}, function(err){});
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios 使用
</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script></head><body><div class="container"><button class="btn btn-primary">GET 請(qǐng)求
</button></div><script>const btn = document.querySelector("button");btn.onclick = function() {axios.get("https://www.baidu.com/s?wd=村雨遙").then(response => {console.log(response)});}</script></body>
</html>
post 請(qǐng)求
axios
.post(url
, {key
=value
, key2
=value2
}).then(function(response){}, function(err){});
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios 使用
</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script></head><body><div class="container"> <button class="btn btn-warning">POTST 請(qǐng)求
</button></div><script>data: {wd: "村雨遙"}const btn = document.querySelector("button"); btn.onclick = function() {axios.post('https://www.baidu.com/s', data).then(response => {console.log(response)});}</script></body>
</html>
put 請(qǐng)求
axios
.put(url
, {key
=value
, key2
=value2
}).then(function(response){}, function(err){});
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios 使用
</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script></head><body><div class="container"><button class="btn btn-success">PUT 請(qǐng)求
</button></div><script>data: {name: "村雨遙",id: "cunyu1943"}const btn = document.querySelector("button");btn.onclick = function() {axios.put('https://www.baidu.com/s', data).then(response => {console.log(response)});}</script></body>
</html>
delete 請(qǐng)求
axios
.delete(url
?key
=value
&key2
=value2
).then(function(response){}, function(err){});
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios 使用
</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script></head><body><div class="container"><button class="btn btn-danger">DELETE 請(qǐng)求
</button></div><script>const btn = document.querySelector("button");btn.onclick = function() {axios.delete("https://www.baidu.com/s?wd=村雨遙").then(response => {console.log(response)});}</script></body>
</html>
總結(jié)
以上就是本文的所有內(nèi)容了，主要介紹了 Axios 的定義、特性、如何安裝以及所支持的瀏覽器，然后介紹了如何使用 Axios 來(lái)模擬發(fā)起最常用的 GET、POST、PUT 以及 DELETE 請(qǐng)求。
總結(jié)
以上是生活随笔為你收集整理的Axios 简单使用指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
