網(wǎng)站首頁(yè) 編程語(yǔ)言 正文
〇、前言
Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 Node.js 中。簡(jiǎn)單的講就是可以發(fā)送 Get、Post 請(qǐng)求。
諸如 Vue、React、Angular 等前端框架都可以使用 Axios，由于他們不操作 DOM，所以就不必須引用 jQuery。如果你的項(xiàng)目里面用了 jQuery，此時(shí)就不需要多此一舉了，jQuery 里面本身就可以發(fā)送請(qǐng)求（$.get(URL,data,function(data,status,xhr),dataType)）。
幾個(gè)易混淆的概念
- Ajax：Asynchronous JavaScript And XML，翻譯過(guò)來(lái)就是“異步的 Javascript 和 XML”，屬于一個(gè)術(shù)語(yǔ)或概念模型，并不特指某一技術(shù)，它很重要的特性之一就是讓頁(yè)面實(shí)現(xiàn)局部刷新，而無(wú)需重載整個(gè)頁(yè)面。
- XHR：XMLHttpRequest 對(duì)象用于與服務(wù)器交互。通過(guò) XMLHttpRequest 可以在不刷新頁(yè)面的情況下請(qǐng)求特定 URL，取的數(shù)據(jù)后刷新局部頁(yè)面。因此，XHR 可以實(shí)現(xiàn) Ajax 請(qǐng)求。
-
Promise：是?ES6 新增的一個(gè)對(duì)象，是對(duì) XHR 的一種封裝。
它就像一個(gè)容器，里面存放著未來(lái)才會(huì)執(zhí)行的函數(shù)名，處理結(jié)果要在異步操作完成后拿到，然后通過(guò) .then() 進(jìn)行后續(xù)操作。
它有三種狀態(tài)：Pending（進(jìn)行中）、Fulfilled（成功）、Rejected（拒絕），進(jìn)入成功或拒絕的狀態(tài)就不會(huì)再發(fā)生改變。 - Fetch：是在 ES6 出現(xiàn)的，它使用了 ES6 提出的 Promise 對(duì)象。是一種網(wǎng)絡(luò)請(qǐng)求標(biāo)準(zhǔn) API。
-
Axios：用于網(wǎng)絡(luò)請(qǐng)求的第三方庫(kù)，引用后即可用。
使用環(huán)境有兩種，一種是在瀏覽器端發(fā)送 XHR 請(qǐng)求（中間有一層 Promise 封裝），另一種是在?nodejs 中發(fā)送 http 請(qǐng)求，因此利于平臺(tái)切換。
支持 Promise API，使用 Promise 管理異步，告別傳統(tǒng) Callback 方式；豐富的配置項(xiàng)，支持?jǐn)r截器等高級(jí)配置。
注：一兩句話不可能講清楚他們的區(qū)別，待后續(xù)再慢慢一一展開(kāi)介紹吧，如有不準(zhǔn)確的描述，請(qǐng)?jiān)u論區(qū)指正。
參考：你知道Ajax、Fetch、Axios三者的區(qū)別嗎？?? ?ajax、Promise、axios總結(jié)
回到頂部
一、如何引用？
1、前端項(xiàng)目
// 1、安裝 Axios 庫(kù) |
|
// 在項(xiàng)目文件根目錄下打開(kāi)命令行，輸入如下語(yǔ)句 |
|
> npm install axios |
|
// 2、js 文件中引入 |
|
import axios from 'axios'; |
|
// 3、直接通過(guò)關(guān)鍵字 axios 發(fā)送 http 請(qǐng)求 |
|
// Get 請(qǐng)求 |
|
axios({ |
|
method: 'get', |
|
url: 'URL文本' |
|
}).then(({data}) => { |
|
// 。。。 |
|
}).catch((err) =>{ |
|
console.log("catch-err:",err); |
|
}).finally(() =>{ |
|
// 。。。 |
|
}) |
|
// Post 請(qǐng)求 |
|
axios({ |
|
headers:{'content-type':'application/json'}, |
|
method: 'post', |
|
url: 'URL文本', |
|
data:JSON.stringify({"dataid":dataid}) |
|
}).then(({data}) => { |
|
console.log("then-data:",data); |
|
}).catch((err) =>{ |
|
console.log("catch-err:",err); |
|
}).finally(() =>{ |
|
// 。。。 |
|
}) |
2、ASP.NET Core MVC 項(xiàng)目
@* 1、引用 js 包的 CDN *@ |
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
|
@* 2、通過(guò)關(guān)鍵字 axios 發(fā)送 http 請(qǐng)求 *@ |
|
<script> |
|
// 調(diào)用方法 message() 查看測(cè)試結(jié)果 |
|
window.onload = function () { |
|
// Get 請(qǐng)求 |
|
axios.get('https://localhost:44360/api/Methodname', { |
|
params: { |
|
mingcheng: '網(wǎng)絡(luò)科技' |
|
}, |
|
headers: { |
|
'token': '1111', |
|
} |
|
} |
|
).then(ret => { |
|
console.log("get:", ret); |
|
}) |
|
// Post 請(qǐng)求 |
|
axios.post('https://localhost:44360/api/Methodname', |
|
{ |
|
"id": "df332b50-4abf-4fe6-814b-6d330a9ecc73", |
|
"gongsix": "線下" |
|
}, |
|
{ |
|
headers: { |
|
'token': '1111', |
|
} |
|
} |
|
).then(ret => { |
|
console.log("post:", ret); |
|
}) |
|
} |
|
</script> |
另外，除了通過(guò) CDN 引用 js 庫(kù)外，還可以直接添加 js 文件到項(xiàng)目的靜態(tài)文件夾 wwwroot，然后在 .cshtml 頁(yè)面文件中用過(guò)路徑引用。
簡(jiǎn)要的三個(gè)步驟如下：
- 下載 js 庫(kù)文件。可以直接在網(wǎng)絡(luò)上下載，也可以通過(guò)通過(guò)項(xiàng)目的“管理 NuGet 程序包”來(lái)安裝 axios。安裝成功后，找到對(duì)應(yīng)的包右鍵打開(kāi)“在文件資源管理器中打開(kāi)文件夾”，按照路徑“Content/Scripts/axios.min.js”找到下載的最新文件。
- 然后復(fù)制到“wwwroot/js/...”文件夾下備用。如下圖：
????
??3. 然后通過(guò)路徑引用后，即可在 js 腳本中使用 axios。
@* 注意路徑代表 wwwroot 文件夾中，要對(duì)應(yīng)得上 *@ |
|
<script src="~/js/axios/axios.min.js"></script> |
回到頂部
二、語(yǔ)法
| 參數(shù)名 | 示例值 | 解釋 |
| url | '/user' | 用于請(qǐng)求的服務(wù)器 URL |
| method | 'get' | 創(chuàng)建請(qǐng)求時(shí)使用的方法，默認(rèn) get |
| baseURL | 'https://some-domain.com/api/' | 將自動(dòng)加在 `url` 前面，除非 `url` 是一個(gè)絕對(duì) URL（URL 必須帶有資源的完整信息，包含協(xié)議、主機(jī)、路徑等部分） |
| headers | {'X-Requested-With': 'XMLHttpRequest'} | 自定義請(qǐng)求頭 |
| params | { ID: 12345 } | URL 參數(shù)，會(huì)自動(dòng)拼接到 URL 中 |
| data | { firstName: 'Fred' } | 作為請(qǐng)求主體被發(fā)送的數(shù)據(jù)，適用于'PUT'、'POST'、'PATCH' 三個(gè)請(qǐng)求方法。在沒(méi)有設(shè)置 transformRequest 時(shí)，必須是以下類型之一：string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams、瀏覽器專屬：FormData, File, Blob、Nodejs專屬：Stream |
| timeout | 1000 | 請(qǐng)求超時(shí)的毫秒數(shù)（0 表示無(wú)超時(shí)時(shí)間），若超時(shí)請(qǐng)求將被中斷 |
| withCredentials | false | 跨域請(qǐng)求時(shí)是否需要使用憑證，默認(rèn) false |
| responseType | 'json' | 服務(wù)器響應(yīng)的數(shù)據(jù)類型，可以是 'arraybuffer', 'blob', 'document', 'json'-默認(rèn), 'text', 'stream' |
| responseEncoding | 'utf8' | 數(shù)據(jù)編碼類型，默認(rèn) utf8 |
| maxContentLength | 2000 | 允許的響應(yīng)內(nèi)容的最大長(zhǎng)度，設(shè)置為無(wú)限長(zhǎng)度：Infinity |
1、Get 請(qǐng)求
以下列舉三種寫法：
// （調(diào)用型1）查詢給定 ID 的 user 對(duì)象請(qǐng)求 |
|
axios.get('/user?ID=12345') |
|
.then(function (response) { |
|
console.log(response); |
|
}) |
|
.catch(function (error) { |
|
console.log(error); |
|
}); |
|
// （調(diào)用型2）另一種寫法 |
|
axios.get('/user', { |
|
params: { |
|
ID: 12345 |
|
} |
|
}) |
|
.then(function (response) { |
|
console.log(response); |
|
}) |
|
.catch(function (error) { |
|
console.log(error); |
|
}); |
|
// （方法型）寫法 |
|
axios({ |
|
method:'get', |
|
url:'/data.json', |
|
params:{ |
|
id:'12345' |
|
} |
|
}).then((res)=>{ |
|
console.log(res) |
|
}) |
?2、Post 請(qǐng)求
?一般上傳的數(shù)據(jù)分兩種：form-data 表單提交（圖片上傳、文件上傳）、application/json。
// 先定義一個(gè)入?yún)?data |
|
let data = { id : 12 } |
|
// （調(diào)用型）寫法 |
|
axios.post('/post',data) |
|
}).then((res)=>{ |
|
console.log(res) |
|
}) |
|
// （方法型）寫法 |
|
axios({ |
|
method:'post', |
|
url:'/post', |
|
data:data |
|
}).then((res)=>{ |
|
console.log(res) |
|
}) |
關(guān)于 Post 請(qǐng)求的 Content-Type：
當(dāng)我們直接把入?yún)⑻钊?json 對(duì)象，丟給后端接口，此時(shí) Content-Type 就自動(dòng)為：application/json;charset=UTF-8。
當(dāng)我們把 json 對(duì)象轉(zhuǎn)為 FormData 類型，如下：
let data = { id : 12 } |
|
let formData = new FormData() |
|
for(let key in data){ |
|
formData.append(key,data[key]) |
|
} |
再將 formData 發(fā)送到后端，此時(shí)Content-Type 就自動(dòng)變成：multipart/form-data; boundary=...... 。
3、判斷多個(gè)請(qǐng)求全部完成 axios.all(sendAry).then()
// 請(qǐng)求列表，包含多個(gè)或多類型請(qǐng)求 |
|
let sendAry = [ |
|
axios.get('URL1'), |
|
axios.get('URL2'), |
|
axios.post('URL3') |
|
]; |
|
// 列表中的請(qǐng)求都完成后，才進(jìn)行后續(xù)操作（可以基于ALL實(shí)現(xiàn)） |
|
axios.all(sendAry).then(result => { |
|
console.log(result); // 輸出是一個(gè)數(shù)組，分別存儲(chǔ)每一個(gè)請(qǐng)求的結(jié)果 |
|
let [resA, resB, resC] = result; |
|
}); |
4、攔截器
在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們。
請(qǐng)求攔截器
axios.interceptors.request.use( |
|
config=>{ |
|
// 在發(fā)送請(qǐng)求前做的操作 |
|
return config |
|
}, |
|
err=>{ |
|
// 在請(qǐng)求錯(cuò)誤的時(shí)候做的操作（此處錯(cuò)誤，請(qǐng)求沒(méi)有到后端） |
|
return Promise.reject(err) // 這里返回一個(gè) promise 對(duì)象 |
|
} |
|
) |
響應(yīng)攔截器
axios.interceptors.response.use( |
|
res=>{ |
|
// 請(qǐng)求成功對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理 |
|
return res |
|
},err=>{ |
|
// 響應(yīng)錯(cuò)誤做的操作（此處錯(cuò)誤，到達(dá)后端后返回） |
|
return Promise.reject(err) |
|
} |
|
) |
下面的代碼是我們平時(shí)發(fā)送 Get 請(qǐng)求的標(biāo)準(zhǔn)形態(tài)，then 會(huì)執(zhí)行請(qǐng)求成功后的操作，catch 用來(lái)捕獲錯(cuò)誤。我們前面攔截響應(yīng)后，無(wú)論是請(qǐng)求還是響應(yīng)的攔截器，他們的 err 返回的 promise?都會(huì)進(jìn)入 catch 中。
axios.get().then().catch(err=>{}) |
取消攔截器
let inerceptors = axios.interceptors.request.use |
|
(config=>{ |
|
? ? config.header = { |
|
? ? ? ? auth:true |
|
? ? } |
|
? ? return config |
|
}) |
|
// 如下：用 axios 全局去調(diào)用 interceptors，這樣就取消攔截了 |
|
axios.inerceptors.request.eject(interceptors) |
實(shí)例：通過(guò)攔截器控制登陸狀態(tài)
// 登錄狀態(tài)，有 token，后端通過(guò) headers 中的 token 進(jìn)行身份校驗(yàn) |
|
let request = axios.create({}) |
|
request.interceptors.request.use |
|
(config => { |
|
? config.headers.token = '' // 發(fā)送請(qǐng)求前，統(tǒng)一將 token 加入到請(qǐng)求 headers |
|
? return config |
|
}) |
|
// 非登陸狀態(tài)，無(wú) token |
|
let request2 = axios.create({}) |
5、參數(shù)配置方法
全局配置
// 兩個(gè)實(shí)例：（格式類同） |
|
axios.defaults.timeout = 1000 // 全局配置請(qǐng)求時(shí)長(zhǎng)（單位：毫秒） |
|
axios.defaults.baseURL = 'https://api.example.com'; // 統(tǒng)一配置請(qǐng)求基礎(chǔ) URL |
實(shí)例配置
// 在創(chuàng)建實(shí)例時(shí)設(shè)置默認(rèn)配置 |
|
const instance = axios.create({ |
|
baseURL: 'https://api.example.com' |
|
}); |
|
// 創(chuàng)建實(shí)例后可更改默認(rèn)值 |
|
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN; |
優(yōu)先級(jí)：請(qǐng)求配置 > 實(shí)例配置 > 全局配置
6、錯(cuò)誤處理
// 首先設(shè)置兩種攔截器 |
|
axios.interceptors.request.use( |
|
config =>{ |
|
return config |
|
}, |
|
err =>{ |
|
return Promise.reject(err) |
|
} |
|
) |
|
axios.interceptors.response.use( |
|
res =>{ |
|
return res |
|
}, |
|
err =>{ |
|
return Promise.reject(err) |
|
} |
|
) |
|
// 錯(cuò)誤的獲取 |
|
axios.get('/data.json').then(res=>{ |
|
console.log(res) |
|
}) |
|
.catch(err =>{ |
|
console.log(err) // 所有錯(cuò)誤處理都會(huì)進(jìn)入此處 |
|
}) |
具體的實(shí)踐過(guò)程中，我們需要?jiǎng)?chuàng)建一個(gè)統(tǒng)一的錯(cuò)誤處理，將所有的錯(cuò)誤類型都放在攔截其中，方便我們后面調(diào)用接口時(shí)使用。
一個(gè)實(shí)例：
// 創(chuàng)建一個(gè)請(qǐng)求實(shí)例 |
|
let instance = axios.create({}) |
|
// 為請(qǐng)求實(shí)例添加請(qǐng)求攔截器 |
|
instance.interceptors.request.use( |
|
config =>{ |
|
return config |
|
}, |
|
err =>{ |
|
// 請(qǐng)求錯(cuò)誤，一般 http 狀態(tài)碼以 4 開(kāi)頭，常見(jiàn)：401 超時(shí)，404 not found 多為前端瀏覽器錯(cuò)誤 |
|
return Promise.reject(err) |
|
} |
|
) |
|
instance.interceptors.response.use( |
|
res=>{ |
|
return res |
|
}, |
|
err =>{ |
|
// 響應(yīng)錯(cuò)誤，一般 http 狀態(tài)碼以 5 開(kāi)頭，500 系統(tǒng)錯(cuò)誤，502 系統(tǒng)重啟等，偏向于服務(wù)端返回的報(bào)錯(cuò) |
|
return Promise.reject(err) |
|
} |
|
) |
|
// 使用 |
|
instance.get('/data').then(res=>{ |
|
console.log(res) |
|
}) |
|
.catch(err => { |
|
console.log(err) |
|
}) |
?
原文鏈接：https://blog.csdn.net/2301_78834737/article/details/131588629
- 上一篇：沒(méi)有了
- 下一篇：沒(méi)有了
相關(guān)推薦
- 2022-12-07 react?app?rewrited替代品craco使用示例_React
- 2023-01-30 python多進(jìn)程程序打包成exe的問(wèn)題_python
- 2023-09-18 element-plus 字體變色之cell-style
- 2023-02-25 C++?move()函數(shù)及priority_queue隊(duì)列使用記錄_C 語(yǔ)言
- 2022-08-30 C++示例講解初始化列表方法_C 語(yǔ)言
- 2022-08-07 C#中struct與class的區(qū)別詳解_C#教程
- 2023-05-15 Android?onMeasure與onDraw及自定義屬性使用示例_Android
- 2022-07-22 C語(yǔ)言中字符串詳解
- 欄目分類
-
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過(guò)濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速