1要使用axios請(qǐng)求數(shù)據(jù)苞慢，則需要進(jìn)行一下這幾個(gè)步驟哦艾扮。
- 要使用axios，就必須下載axios這個(gè)庫朝扼，可以有一下幾個(gè)途徑：
1、使用 npm install axios 或者 yarn add axios
2霎肯、可以之間使用線上cdn：<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
- 需要從后端那里獲得數(shù)據(jù)api接口地址擎颖。本次模擬數(shù)據(jù)是從JSONPlaceholder官網(wǎng)上隨機(jī)獲取的一個(gè)api接口。
- 需要了解到axios是基于 Promise + XMLHttpRequest 的观游，axios的底層還是ajax的搂捧。所以要知道全局函數(shù)axios.get(url)它返回的是一個(gè)Promise對(duì)象，最后還是需要一個(gè)變量容器來接收的懂缕。
- 接收到的Promise 還需要對(duì)之進(jìn)行成功回調(diào)與失敗回調(diào)處理允跑。
以下是我的例子（嘻嘻）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>前端與后臺(tái)交互之a(chǎn)xios</title>
</head>
<!-- 首先第一步，要使用axios的話提佣，就必須先引入axios這個(gè)庫 -->
<!-- axios的優(yōu)點(diǎn)就是可以解決以同步的方式處理異步操作吮蛹，是基于ajax + XMLHTTPRequest的，也就是它的底層還是ajax-->
<!-- 因?yàn)檫@個(gè)庫中已經(jīng)暴露一個(gè)axios的全局函數(shù) -->
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
//get請(qǐng)求的,先定義好有效的請(qǐng)求地址
// 為了方便拌屏，從JSONPlaceholder官網(wǎng)中隨機(jī)獲取一個(gè)api數(shù)據(jù)接口潮针，進(jìn)行請(qǐng)求
var url = 'http://jsonplaceholder.typicode.com/albums';
var p = axios.get(url);//這個(gè)axios()返回的是一個(gè)Promise對(duì)象，需要對(duì)這個(gè)對(duì)象進(jìn)行處理
p.then((response)=>{
console.log(response);
// 這里是響應(yīng)成功返回的數(shù)據(jù)倚喂，把上面的response打印出來的時(shí)候每篷，就會(huì)得到以下結(jié)果
// config: {url: "請(qǐng)求的地址"}，這是一個(gè)配置文件
// headers: 請(qǐng)求頭信息
// data: (100) 返回響應(yīng)的數(shù)據(jù)
// request: ajax相關(guān)的請(qǐng)求信息
// status: 200端圈；響應(yīng)狀態(tài)
// statusText: "OK"
// 判斷響應(yīng)狀態(tài)
if(response.status === 200){
//獲得成功響應(yīng)返回的數(shù)據(jù)
console.log(response.data);
}
},(error)=>{
//錯(cuò)誤返回錯(cuò)誤信息
});
console.log(p);
</script>
<body>
</body>
</html>
最后通過服務(wù)器開啟網(wǎng)頁的時(shí)候焦读，在控制臺(tái)打印的數(shù)據(jù)如下（表示成功返回響應(yīng)信息）：
image.png
