axios傳參方式，Axios基本使用
同步請求(qiu)和異步請求(qiu)
同步: 指單線程依次做幾件事
異步: 指多線程同時做幾件事
同步請求: 指客戶端瀏覽(lan)器(qi)只有(you)一個(ge)主線(xian)程(cheng), 此線(xian)程(cheng)負責(ze)頁面(mian)的(de)(de)渲染和發出(chu)請求等操作, 如果(guo)此主線(xian)程(cheng)發出(chu)請求的(de)(de)話則停止渲染而且會清(qing)空(kong)頁面(mian)顯(xian)示(shi)(shi)(shi)的(de)(de)內(nei)容(rong) 直到服務器(qi)響應了(le)(le)數據后才能(neng)再次顯(xian)示(shi)(shi)(shi), 由于(yu)主線(xian)程(cheng)清(qing)空(kong)了(le)(le)原(yuan)有(you)顯(xian)示(shi)(shi)(shi)的(de)(de)內(nei)容(rong)所(suo)以(yi)只能(neng)實(shi)現頁面(mian)的(de)(de)整(zheng)體(ti)刷新(整(zheng)體(ti)改變)
異步請求: 指客戶(hu)端的(de)主線(xian)程只負責頁(ye)面(mian)渲染相關操(cao)作,發請(qing)求(qiu)的(de)事由新的(de)子線(xian)程操(cao)作, 這樣子線(xian)程發出請(qing)求(qiu)時頁(ye)面(mian)不需(xu)要清空(kong),而且(qie)可以將查詢回(hui)來的(de)數據展示在(zai)原有頁(ye)面(mian)基礎之(zhi)上, 這樣實現的(de)效果就叫做(zuo)頁(ye)面(mian)的(de)局部刷新
客(ke)戶端發(fa)出請求的幾種方式
通過瀏覽器的地址欄中發出請求 同步請求
通過html頁面中的超鏈接發出請求 同步請求
通過html頁面中的form表單發出請求 同步請求
通過前端框架發出請求 異步請求
Get請求和(he)Post請求
從字面理解:Get是跟服務器要數據, Post是給服務器傳數據
Get: 請求參數寫在請求地址的后面(可見),請求參數有大小限制只能穿幾k的數據(不能處理文件上傳) 應用場景: 查(cha)詢請求(qiu)(qiu)一般都會使用(yong)(yong)get, 刪除也會使用(yong)(yong)get請求(qiu)(qiu)
Post:請求參數放在請求體里面(不可見),參數沒有大小限制 應用場(chang)景: 文件上傳, 帶有敏感信息的(de)請求(比如注冊登(deng)錄(lu)時有密碼)
axios是什么(me)
Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
特點
從瀏覽器(qi)中(zhong)創建 XMLHttpRequests
從 node.js 創建 http 請求(qiu)
支持(chi) Promise API
攔截請求和響應
轉換(huan)請求數據和響應(ying)數據
取消請求
自動轉換(huan) JSON 數據
客戶端支持(chi)防御 XSRF
使用axios
Using npm: //第一種 $ npm install axios Using bower: //第二種 $ bower install axios Using yarn: //第三種 $ yarn add axios Using jsDelivr CDN: //第四種 -----推薦使用<script src="//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>Using unpkg CDN: //第五種<script src="//unpkg/axios/dist/axios.min.js"></script>
使用axios發起get方式請求
//get無參axios.get(地址).then(請求成功的回調).catch(請求失敗的回調)//拼接參數axios.get(地址?參數=值&參數=值...).then(請求成功的回調).catch(請求失敗的回調)//parmas傳參axios.get(地址,{params:{參數}}).then(請求成功的回調).catch(請求失敗的回調)//deno案例<script src="js/axios.min.js"></script><script> let v = new Vue({ el:"body>div", data:{ isLogin:false, user:{nick:"軍"}
}, created:function (){ //vue-自動加載的方法 //axios get 請求
axios.get("/currentUser").then(function (response) {
v.user = response.data;
v.isLogin = v.user !== "";
})
}, methods:{
}
})</script>使用axios發起post方式請求
//post 參數為對象axios.post(地址,{參數}).then(請求成功的回調).catch(請求失敗的回調)//demo案例<script src="js/axios.min.js"></script><script> let v = new Vue({ el:"div", data:{ user:{ username:"", password:""
}
}, methods:{
login(){ //axios post 請求
axios.post("login",v.user).then(function (response) { if(response.data==1){
alert("登錄成功")
location.href="/";
}else if(response.data==2){
alert("用戶不存在")
}else{
alert("密碼錯誤")
}
})
}
}
})</script>axios的其他(ta)方式(shi)發送請求
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
【注】在使用別名方法時， url、method、data 這些屬性都不必在配置中指定。
//發送put,document.getElementById("btn7").onclick = function(){ //發送put,接收三個參數，url 請求體 、 config配置對象
axios.put("//localhost:3000/posts/2",{title:"axios學習", author:"Liaoxiaoyan"})
.then(response=>{ console.log(response);
})
};axios的配(pei)置介紹
baseURL：設置url的基本結構（請求根地址），域名和協議，再結合屬性url某個請求路徑，axios會自動將baseURL 和 url 進行拼接，從而得出正確的請求路徑。
method：請求方式 get/post
timeout：延時時間（超過多少時間就取消請求）【單位是毫秒】
params： 請求參數（查詢的對象）
transformRequest、transformResponse 對(dui)請(qing)求結果(guo)進(jin)行(xing)預(yu)(yu)處理、對(dui)響應結果(guo)進(jin)行(xing)預(yu)(yu)處理
headers：請求頭 （在身份驗證時，可以在頭信息加入一個標識）
data：請求體（數據形式有json對象和字符串形式）
responseType：響應的數據格式 json/text/document/stream等
withCredentials：跨域親戚是否攜帶cookies
auth：請求基礎驗證（驗證用戶名和密碼）
adapter：自定義請求處理
xsrfCookieName和(he)xsrfHeaderName 設(she)(she)置(zhi)cookie的(de)(de)(de)(de)名字，設(she)(she)置(zhi)頭信(xin)息(xi)名字（安全設(she)(she)置(zhi)，保證請(qing)求(qiu)(qiu)(qiu)來自自己的(de)(de)(de)(de)客(ke)戶端，避免(mian)跨站(域)攻(gong)擊【標識保護作(zuo)用---標識：返(fan)回請(qing)求(qiu)(qiu)(qiu)的(de)(de)(de)(de)返(fan)回結果帶有服(fu)(fu)(fu)務(wu)端的(de)(de)(de)(de)sessionID，保護：某些網站會通過超鏈接向在哪服(fu)(fu)(fu)務(wu)器(qi)(qi)發送請(qing)求(qiu)(qiu)(qiu)，由于(yu)沒有拿到服(fu)(fu)(fu)務(wu)器(qi)(qi)的(de)(de)(de)(de)sessionID，請(qing)求(qiu)(qiu)(qiu)失敗】）
socketPath：設置socket文件位置，向docker的守護進行發送請求，與代理proxy有優先級關系，兩者同時設定，優先選socket
httpAgent、httpsAgent 設置客(ke)戶端(duan)信(xin)息(xi)
proxy 代理：axios的代理是在服務端node.js 中【代理作用：抓取數據（爬蟲），
使(shi)用一個ip向某個目標服務器發送(song)請求以抓取數(shu)(shu)據(ju)時，可能會(hui)被禁掉ip------解決：借助多(duo)個中間代(dai)理進行切換，發送(song)請求從(cong)而獲取到目標服務器的數(shu)(shu)據(ju)。】
cancelToken：取消請求
<button class="btn btn-primary">Get請求</button>
//獲取按鈕
const btns = document.querySelectorAll('button');
btns[0].onclick = function (){
//調用axios對象調用request方法（方法中傳入一個對象參數）
axios.request({
//請求類型
method: 'GET',
//URL
url:'//localhost:3000/posts/2'
}).then(response => {
console.log(response)
})
};
//發送get
document.getElementById("btn1").onclick = function(){
axios({
method:"GET",
url:"//localhost:3000/posts/1"
}).then(response=>{
console.log(response);
})
};
//發送post
document.getElementById("btn2").onclick = function(){
axios({
method:"POST",
url:"//localhost:3000/posts",
data:{
title:"axios學習",
author:"Yehaocong"
}
}).then(response=>{
console.log(response);
})
};axios和ajax區(qu)別(bie)
1)理論區別(bie)：
axios是通過Promise實(shi)現對(dui)(dui)ajax技術(shu)的(de)(de)一(yi)種封裝(zhuang)，就像jquery對(dui)(dui)ajax的(de)(de)封 裝(zhuang)一(yi)樣。（ajax技術(shu)實(shi)現了局部(bu)數據的(de)(de)刷(shua)新，axios實(shi)現了對(dui)(dui)ajax的(de)(de)封裝(zhuang)。）；
axios是(shi)ajax，ajax不(bu)止axios；axios有(you)的(de)ajax都(dou)有(you)，ajax有(you)的(de)axios不(bu)一 定有(you)。
2)代碼區別
axios({ url: '/getName', method: 'get', responseType: 'json', // 默認的 data: { name:'tom'
}
}).then(function (response) {console.log(response);console.log(response.data);
}).catch(function (error) {console.log(error);
});//=====區別=======//$.ajax({ url: '/getName', type: 'get', dataType: 'json', data: { name:'tom'
}, success: function (response) { console.log(response)；
}
})3）邏(luo)輯區別
ajax本身是針對MVC的編程
ajax
axios符合現在前端MVVM的浪潮
axios
【注】由 ViewModel 負責與 Model 層交互，這就完全解耦了 View 層和 Model 層。
4）優缺點
axios優點：
從瀏覽器中創建(jian) XMLHttpRequest；
支持(chi) Promise API；
從(cong) node.js 創建 http 請求；
轉換(huan)請求和響應數據；
自(zi)動轉換JSON數據。
ajax缺點:
基于(yu)原生的XHR開發(fa)，XHR本身的架構(gou)不清晰；
JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理；
不符合關注分離（Separation of Concerns）的原則；
配置和調(diao)用(yong)方式非常(chang)混亂，而且基(ji)于事件的異步(bu)模型不友好(hao)。
學(xue)習記錄，如有侵權(quan)請聯系刪(shan)除
