目錄
- Axios的特性有：
- Axios API
- 向axios（）傳遞相關(guān)配置來創(chuàng)建請求；
- 常用的配置項
- axios 全局默認值的配置
- axios攔截器：在請求或響應(yīng)被then或catch處理前攔截它們
- axios的快速請求方法
- onload / onprogress
- response屬性
Axios 是目前應(yīng)用最為廣泛的 AJAX 封裝庫
Axios的特性有：
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請求
- 支持 Promise API
- 攔截請求和響應(yīng)
- 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
- 取消請求
- 自動轉(zhuǎn)換 JSON 數(shù)據(jù)
- 客戶端支持防御 XSRF
使用axios時，需要通過使用script標簽引入：https://unpkg.com/axios/dist/axios.min.js
axios的中文網(wǎng)鏈接：Axios中文網(wǎng)
Axios API
向axios（）傳遞相關(guān)配置來創(chuàng)建請求；
- axios（對象格式的配置選項）
- axios（url，config）
常用的配置項
- url：用于請求的服務(wù)器URL
- method：創(chuàng)建請求時使用的方法
- baseURL：傳遞相對URL前綴，將自動加在url前面
- headers：即將被發(fā)送的自定義請求頭
- params：即將與請求一起發(fā)送的URL參數(shù)
- data：作為請求主體被發(fā)送的數(shù)據(jù)
- timeout：指定請求超時的毫秒數(shù)（0表示無超時時間）
- responseType：表示服務(wù)器響應(yīng)的數(shù)據(jù)類型，默認“json”
axios（）.then(function(response){
//正常請求的響應(yīng)信息對象response
})
.catch(function(error){
//捕獲的錯誤
})
代碼展示如下：
script src="https://unpkg.com/axios/dist/axios.min.js">/script>
script>
//使用axios方法 post請求
axios({
url:"/pinglun",
method:"post",
baseURL:"http://localhost:3000",
header:{
"Content-Type":"application/json"
},
data:{
"content":"well",
"lyId":4
},
timeout:1000,
}).then(function(res){
console.log(res.data);
}).catch(function(error){
console.log(error);
})
/script>
axios 全局默認值的配置
axios.defaults.baseURL = 'https://xxx.xxx.com';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode'
axios攔截器：在請求或響應(yīng)被then或catch處理前攔截它們
axios 的請求攔截器
//axios 的請求攔截器
axios.interceptors.request.use(function(config){
//配置項config
config.params = {
id:2 //對配置項中的params進行更改，篩選id=2
}
return config;//要有返回值
})
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function(res){
console.log(res.data);
})
.catch(function(error){
console.log(error);
})
//axios 方法
axios("http://localhost:3000/pinglun")
.then(function (res) {
console.log(res.data);
})
.catch(function (error) {
console.log(error);
})
//多個axios方法也可以攔截
axios 的響應(yīng)攔截器
//axios 的響應(yīng)攔截器
axios.interceptors.response.use(function(response){
return(response.data);//response里有很多值，選擇data即可
})
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function (res) {
console.log(res);//response那里攔截了，已經(jīng)將數(shù)據(jù)傳成data了
})
.catch(function (error) {
console.log(error);
})
axios的快速請求方法
axios.get(url[,config])
//axios.get(url[,config])
axios.get("http://localhost:3000/liuyan?id=2")
.then(function(res){
console.log(res.data);
})
axios.get("http://localhost:3000/liuyan",{
params:{
id:1
}
}).then(function(res){
console.log(res.data);
})
axios.post(url[,data[,config]])
//axios.post(url[,data[,config]]) , post請求，添加數(shù)據(jù)
axios.post("http://localhost:3000/users",{
name:"laowang",
age:23,
class:1
})
axios.delete(url[,config])
//axios.delete(url[,config])
axios.delete("http://localhost:3000/liuyan",{
params:{
id:5
}
})
axios.put(url[,data[,config]])
//axios.put(url[,data[,config]])
axios.put("http://localhost:3000/liuyan",{
name:"wangshisan",
id:11
})
XMLHttpRequest2.0，html5對XMLHttpRequest類型全面升級，使其變得更加易用、強大。
onload / onprogress
XML.onload 事件：只在請求完成時觸發(fā)
XML.onprogress 事件：只在請求進行中觸發(fā)
//xhr.onload事件：只在請求完成時觸發(fā)
//xhr.onprogress事件：只在請求進行中觸發(fā)
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/pinglun");
xhr.onload = function(){
console.log("load:",this.readyState);
};
xhr.onprogress = function(e){
console.log("progress:",this.readyState);
//在周期性請求過程中，接收到的數(shù)據(jù)個數(shù)
console.log(e.loaded);
//接收數(shù)據(jù)的總個數(shù)
console.log(e.total);
}
xhr.send(null);
response屬性
以對象的形式表述響應(yīng)體，其類型取決于responseType的值。根據(jù)responseType的值，來通過特定的類型請求數(shù)據(jù)。
responseType要在調(diào)用open（）初始化請求之后，在調(diào)用send（）發(fā)送請求到服務(wù)器之前設(shè)置才會有效。
//XMLHttpRequest之前的response返回
//responseText
// responseXml
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/pinglun");
xhr.onload = function(){
var data = JSON.parse(this.responseText);
console.log(data);
}
xhr.send(null);
// xhr2.0新增的response屬性
// response
// responseType
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/liuyan");
xhr.responseType = "json";
xhr.onload = function(){
console.log(this.response);
}
xhr.send(null)
以上就是Ajax常用封裝庫——Axios的使用的詳細內(nèi)容，更多關(guān)于Ajax封裝庫Axios的使用的資料請關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:- Vue CLI項目 axios模塊前后端交互的使用(類似ajax提交)
- Vue官方推薦AJAX組件axios.js使用方法詳解與API
- vue項目使用axios發(fā)送請求讓ajax請求頭部攜帶cookie的方法
- vue 組件的封裝之基于axios的ajax請求方法
- vue結(jié)合axios與后端進行ajax交互的方法
- 關(guān)于vue中的ajax請求和axios包問題
- vue axios 在頁面切換時中斷請求方法 ajax
- axios進階實踐之利用最優(yōu)雅的方式寫ajax請求
- 關(guān)于前端ajax請求的優(yōu)雅方案（http客戶端為axios）
- 在Vue組件化中利用axios處理ajax請求的使用方法
- vue使用Axios做ajax請求詳解
- VUE 更好的 ajax 上傳處理 axios.js實現(xiàn)代碼
