一 axios是什么
上古瀏覽器頁(yè)面在向服務(wù)器請(qǐng)求數(shù)據(jù)時(shí)，因?yàn)榉祷氐氖钦麄€(gè)頁(yè)面的數(shù)據(jù)，頁(yè)面都會(huì)強(qiáng)制刷新一下，這對(duì)于用戶來(lái)講并不是很友好。并且我們只是需要修改頁(yè)面的部分?jǐn)?shù)據(jù)，但是從服務(wù)器端發(fā)送的卻是整個(gè)頁(yè)面的數(shù)據(jù)，十分消耗網(wǎng)絡(luò)資源。而我們只是需要修改頁(yè)面的部分?jǐn)?shù)據(jù)，也希望不刷新頁(yè)面，因此異步網(wǎng)絡(luò)請(qǐng)求就應(yīng)運(yùn)而生。
Ajax(Asynchronous JavaScript and XML)：異步網(wǎng)絡(luò)請(qǐng)求。Ajax能夠讓頁(yè)面無(wú)刷新的請(qǐng)求數(shù)據(jù)。
實(shí)現(xiàn)ajax的方式有多種，如jQuery封裝的ajax，原生的XMLHttpRequest，以及axios。但各種方式都有利弊
- 原生的XMLHttpRequest的配置和調(diào)用方式都很繁瑣，實(shí)現(xiàn)異步請(qǐng)求十分麻煩
- jQuery的ajax相對(duì)于原生的ajax是非常好用的，但是沒(méi)有必要因?yàn)橐胊jax異步網(wǎng)絡(luò)請(qǐng)求而引用jQuery框架
Axios，可以理解為ajax i/o system，這不是一種新技術(shù)，本質(zhì)上還是對(duì)原生XMLHttpRequest的封裝，可用于瀏覽器和nodejs的HTTP客戶端，只不過(guò)它是基于Promise的，符合最新的ES規(guī)范。
二 Axios請(qǐng)求方式
1、axios可以請(qǐng)求的方法：
get：獲取數(shù)據(jù)，請(qǐng)求指定的信息，返回實(shí)體對(duì)象
post：向指定資源提交數(shù)據(jù)（例如表單提交或文件上傳）
put：更新數(shù)據(jù)，從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容
patch：更新數(shù)據(jù)，是對(duì)put方法的補(bǔ)充，用來(lái)對(duì)已知資源進(jìn)行局部更新
delete：請(qǐng)求服務(wù)器刪除指定的數(shù)據(jù)總結(jié)：上述方法中均對(duì)應(yīng)兩種寫(xiě)法：（1）使用別名：形如axios.get()；（2）不使用別名形如axios()；
2、get請(qǐng)求
示例代碼
此時(shí)表示，參數(shù)為id=12，最終的請(qǐng)求路徑Request URL: http://localhost:8080/data.json?id=12
<script>
import axios from 'axios'
export default {
name: 'get請(qǐng)求'，
components: {},
created() {
//寫(xiě)法一
axios.get('接口地址', {
params: {
id: 12,//請(qǐng)求參數(shù)
},
}).then(
(res) => {
//執(zhí)行成功后代碼處理
}
)
//寫(xiě)法二
axios({
method: 'get',//請(qǐng)求方法
params: {
id: 12,//請(qǐng)求參數(shù)
},
url: '后臺(tái)接口地址',
}).then(res => {
//執(zhí)行成功后代碼處理
})
}
}
</script>
3、post請(qǐng)求
post請(qǐng)求一般分為兩種類型
-
form-data（常用于表單提交（圖片上傳、文件上傳）） -
application/json一般是用于 ajax 異步請(qǐng)求
示例代碼
form-data請(qǐng)求方式代碼如下
注意：請(qǐng)求地址Request URL: http://localhost:8080/data.json，
請(qǐng)求頭中Content-Type: multipart/form-data; boundary=----WebKitFormBoundarydgohzXGsZdFwS16Y
參數(shù)形式：id:12
<script>
import axios from 'axios'
export default {
name: 'get請(qǐng)求'，
components: {},
created() {
//寫(xiě)法一
let data = {
id:12
}
let formData = new formData()
for(let key in data){
fromData.append(key,data[key])
}
axios.post('接口地址', fromData}).then(
(res) => {
//執(zhí)行成功后代碼處理
}
)
//寫(xiě)法二
axios({
method: 'post',//請(qǐng)求方法
data: fromData,
url: '后臺(tái)接口地址',
}).then(res => {
//執(zhí)行成功后代碼處理
})
}
}
</script>
applicition/json請(qǐng)求方式代碼如下
注意：請(qǐng)求地址Request URL: http://localhost:8080/data.json，
請(qǐng)求頭中Content-Type: application/json;charset=UTF-8
參數(shù)形式：{id:12}
<script>
import axios from 'axios'
export default {
name: 'get請(qǐng)求'，
components: {},
created() {
//寫(xiě)法一
let data={
id:12
}
axios.post('接口地址', data}).then(
(res) => {
//執(zhí)行成功后代碼處理
}
)
//寫(xiě)法二
axios({
method: 'post',//請(qǐng)求方法
data: data,
url: '后臺(tái)接口地址',
}).then(res => {
//執(zhí)行成功后代碼處理
})
}
}
</script>
4、put和patch請(qǐng)求
示例代碼put請(qǐng)求
<script>
import axios from 'axios'
export default {
name: 'get請(qǐng)求'，
components: {},
created() {
//寫(xiě)法一
let data = {
id:12
}
axios.put('接口地址', data}).then(
(res) => {
//執(zhí)行成功后代碼處理
}
)
//寫(xiě)法二
axios({
method: 'put',//請(qǐng)求方法
data: data,
url: '后臺(tái)接口地址',
}).then(res => {
//執(zhí)行成功后代碼處理
})
}
}
</script>
patch請(qǐng)求
<script>
import axios from 'axios'
export default {
name: 'get請(qǐng)求'，
components: {},
created() {
//寫(xiě)法一
let data = {
id:12
}
axios.patch('接口地址', data}).then(
(res) => {
//執(zhí)行成功后代碼處理
}
)
//寫(xiě)法二
axios({
method: 'patch',//請(qǐng)求方法
data: data,
url: '后臺(tái)接口地址',
}).then(res => {
//執(zhí)行成功后代碼處理
})
}
}
</script>
5、delete請(qǐng)求
示例代碼參數(shù)以明文形式提交=>params
注意：params方式會(huì)將請(qǐng)求參數(shù)拼接在URL上面，Request URL: http://localhost:8080/data.json?id=12
參數(shù)形式：id:12
Content-Type: text/html; charset=utf-8
axios
.delete("/data.json", {
params: {
id: 12
}
})
.then(res => {
console.log(res, "delete");
});
let params = {
id: 12
};
axios({
method:'delete',
url:'/data.json',
params:params
}).then(res=>{
console.log(res)
})
參數(shù)以封裝對(duì)象的形式提交=>data
data方式不會(huì)講參數(shù)拼接，是直接放置在請(qǐng)求體中的，Request URL:http://localhost:8080/data.json
參數(shù)形式：{id:12}
Content-Type: application/json;charset=UTF-8
//方法二
axios
.delete("/data.json", {
data: {
id: 12
}
})
.then(res => {
console.log(res, "delete");
});
let data = {
id: 12
};
axios({
method:'delete',
url:'/data.json',
data:data
}).then(res=>{
console.log(res)
})
6、并發(fā)請(qǐng)求
并發(fā)請(qǐng)求，就是同時(shí)進(jìn)行多個(gè)請(qǐng)求，并統(tǒng)一處理返回值。
在例子中，我們使用axios.all，對(duì)data.json/city.json同時(shí)進(jìn)行請(qǐng)求，使用axios.spread，對(duì)返回的結(jié)果分別進(jìn)行處理。代碼如下：
示例代碼
// 并發(fā)請(qǐng)求
axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
axios.spread((dataRes, cityRes) => {
console.log(dataRes, cityRes);
})
);
三 Axios實(shí)例
1、創(chuàng)建axios實(shí)例
示例代碼
let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
})
instance.get('/goods.json').then(res=>{
console.log(res.data);
})
可以同時(shí)創(chuàng)建多個(gè)axios實(shí)例。
axios實(shí)例常用配置：
- baseURL 請(qǐng)求的域名，基本地址，類型：String
- timeout 請(qǐng)求超時(shí)時(shí)長(zhǎng)，單位ms，類型：Number
- url 請(qǐng)求路徑，類型：String
- method 請(qǐng)求方法，類型：String
- headers 設(shè)置請(qǐng)求頭，類型：Object
- params 請(qǐng)求參數(shù)，將參數(shù)拼接在URL上，類型：Object
- data 請(qǐng)求參數(shù)，將參數(shù)放到請(qǐng)求體中，類型：Object
2、axios全局配置
示例代碼
//配置全局的超時(shí)時(shí)長(zhǎng)
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';
3、axios實(shí)例配置
示例代碼
let instance = this.$axios.create();
instance.defaults.timeout = 3000;
4、axios請(qǐng)求配置
示例代碼
this.$axios.get('/goods.json',{
timeout: 3000
}).then()
以上配置的優(yōu)先級(jí)為：請(qǐng)求配置 > 實(shí)例配置 > 全局配置
四、攔截器
攔截器：在請(qǐng)求或響應(yīng)被處理前攔截它們
1、請(qǐng)求攔截器
示例代碼
// 請(qǐng)求攔截器
axios.interceptors.request.use(config => {
// 在發(fā)送請(qǐng)求前做些什么
return config;
}, err=>{
// 在請(qǐng)求錯(cuò)誤的時(shí)候的邏輯處理
return Promise.reject(err)
});
2、響應(yīng)攔截器
示例代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-726779.html
// 響應(yīng)攔截器
axios.interceptors.response.use(res => {
// 在請(qǐng)求成功后的數(shù)據(jù)處理
return res;
}, err=>{
// 在響應(yīng)錯(cuò)誤的時(shí)候的邏輯處理
return Promise.reject(err)
});
3、取消攔截
示例代碼文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-726779.html
let inter = axios.interceptors.request.use(config=>{
config.header={
auth:true
}
return config
})
axios.interceptors.request.eject(inter)
到了這里，關(guān)于9-AJAX-下-axios的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
