一、Axios是什么
- Axios是一個(gè)基于promise的HTTP庫(kù)（類似于jQuery的Ajax，用于HTTP請(qǐng)求）
- 可以用于瀏覽器和node.js（既可以用于客戶端也可以用于node.js編寫的服務(wù)端）
二、Axios有哪些特性
- 支持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ù)
- 客戶端支持防御 XSRF
三、Axios瀏覽器支持
image.png
四、安裝
1.使用 npm:
npm install axios
2.引入axios
安裝成功后進(jìn)行引入，在vue項(xiàng)目的main.js文件中引入axios
import axios from 'axios'
Vue.prototype.$axios = axios
五、用法（vue項(xiàng)目已搭建）
- Axios基礎(chǔ)用法（get、post、put 等請(qǐng)求方法）
先介紹一下，Axios常用的幾種請(qǐng)求方法有哪些：get、post、put、patch、delete
get：（一般用于）獲取數(shù)據(jù)
post：提交數(shù)據(jù)（表單提交+文件上傳）
put：更新（或編輯）數(shù)據(jù)（所有數(shù)據(jù)推送到后端（或服務(wù)端））
patch：更新數(shù)據(jù)（只將修改的數(shù)據(jù)推送到后端）
delete：刪除數(shù)據(jù)
題外話，一般公司在實(shí)際開(kāi)發(fā)項(xiàng)目過(guò)程中：
（1）post：一般用于新建
（2）put：一般用于更新（適合數(shù)據(jù)量比較少的更新）
（3）patch：一般用于數(shù)據(jù)量比較大；假如一個(gè)表單的數(shù)據(jù)量很大，有很多項(xiàng)，使用put的話，全部數(shù)據(jù)推送一次是比較耗性能的，這個(gè)時(shí)候可以考慮用patch，只將修改的數(shù)據(jù)推送到后端
以上這些題外話，只是一般的常規(guī)用法，不能代表一定要這樣用；當(dāng)然了，你可能會(huì)說(shuō)我用post來(lái)獲取數(shù)據(jù)，行不行？這個(gè)當(dāng)然行了，絕對(duì)沒(méi)問(wèn)題！具體怎么用還是前后端一起商量著決定，以免發(fā)生不愉快的肢體沖突！
（1）get 請(qǐng)求
<template>
<div>
<h1>axios中g(shù)et請(qǐng)求方式</h1>
<button @click="getJoke">獲取笑話</button>
<p>{{ msg }}</p>
<!--用來(lái)顯示笑話-->
</div>
</template>
<script>
export default {
data() {
return {
msg: null,
};
},
methods: {
getJoke() {
//發(fā)送請(qǐng)求
this.$axios
.get("https://autumnfish.cn/api/joke")
.then((res) => {
console.log(res.data);
//此處的this關(guān)鍵字的指向不是Vue實(shí)例，所以獲取不到data里面的數(shù)據(jù)
this.msg = res.data;
})
.catch((err) => {
console.error(err);
});
},
},
};
</script>
下面了解一下請(qǐng)求信息—
image.png
2） post 請(qǐng)求
this.$axios.post('login', {user:"admin", pwd:"123"}).then(res => {
// 返回?cái)?shù)據(jù)在 res.data 中
})
