提綱:
Axios的概念 安裝 Axios簡單樣本 Axios的API Axios的請求配置和響應資料格式 Axios的攔截器 Ajax,jQuery ajax,axios和fetch的區別 內容:
Axios的概念 axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
特點:
從瀏覽器中建立 XMLHttpRequests
從 node.js 建立 http 請求
支援 Promise API
攔截請求和響應
轉換請求資料和響應資料
取消請求
自動轉換 JSON 資料
用戶端支援防禦 XSRF
2.安裝
安裝nodejs(內建npm)安裝cnpm(可選)
npm install -g cnpm --registry=https://registry.npm.taobao.org
初始化項目:
npm init -y
Npm的方式安裝axios
npm i axios -D 3. Axios簡單樣本
1)、get請求
let vueobj = this;
axios.get('api/goodslists', {
params: { "goodsid":"01003" }
} )
.then(function (response) {
console.log(response.data);
vueobj.goodslist = response.data; //把擷取到的資料賦給goodslist
})
.catch(function (error) {
console.log(error);
});
2)、執行多個並發請求
getall:function(){
function getbooks(){ return axios.get('api/books'); }
function getreaders(){ return axios.get('api/readers'); }
axios.all([getbooks(), getreaders()]).then(
axios.spread(function (books, readers) {
//兩個請求都完成後,調用該函數,第一個參數是第一個請求的結果,第二個參數是第二個請求的結果
console.log(books.data);
console.log(readers.data);
})
);
}
4.Axios的API
Axios函數 Axios請求的別名 Axios處理並發 建立一個執行個體,執行個體方法
1)、axios函數:
axios(config)。在config對象參數裡,除了url外,其它的都可選的屬性。
axios 能夠在進行請求時的一些設定。如:
發起 get請求 let vueobj = this;
axios({
method:'get',
url:'api/goodslists',
params :{ "goodsid":"01003" }
})
.then(function (response) {
vueobj.goodslist = response.data;
})
.catch(function (error) {
console.log(error);
});
2)、axios請求的別名:
為了方便,axios提供了所有要求方法的重新命名支援,如下:
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])
1、axios.request(config)
let vueobj = this;
axios.request({
method:'get',
url:'api/goodslists',
params:{ "goodsid":"01002" }
})
.then(function (response) {
vueobj.goodslist = response.data;
})
.catch(function (error) {
console.log(error);
});
2. axios.get(url[,config])
let vueobj = this;
axios.get('api/goodslists', {
params:{
"goodsid":"01003"
}
})
.then(function (response) {
vueobj.goodslist = response.data;
})
.catch(function (error) {
console.log(error);
});
3. Axios處理並發( Concurrency)
axios.all(iterable)//all函數執行所有的請求
axios.spread(callback)//處理響應回來的回呼函數
代碼:getall:function(){
function getbooks(){ return axios.get('api/books'); }
function getreaders(){ return axios.get('api/readers'); }
axios.all([getbooks(), getreaders()]).then(
axios.spread(function (books, readers) {
//兩個請求都完成後,調用該函數,第一個參數是第一個請求的結果,第二個參數是第二個請求的結果
console.log(books.data);
console.log(readers.data);
})
);
}
4.建立一個執行個體,執行個體方法
建立一個新的執行個體
axios.create([config])
執行個體方法
下面列出了一些執行個體方法。具體的設定將在執行個體設定中被合并。
axios#request(config)
axios#get(url[,config])
axios#delete(url[,config])
axios#head(url[,config])
axios#post(url[,data[,config]])
axios#put(url[,data[,config]])
axios#patch(url[,data[,config]])
代碼:
//1、建立axios執行個體
var instance = axios.create({
method:'get',
url:'api/goodslists',
params:{ "goodsid":"01002" }
});
//2、發送請求
instance.request()
.then(function (response) {
console.log(response.data);
vueobj.goodslist = response.data;
})
.catch(function (error) {
console.log(error);
});
5. Axios的 請求配置和響應資料格式 1)、請求的配置
//`url`是伺服器連結,用來請求用
url:'/user',
//`method`是發起請求時的要求方法
method:`get`,
//`baseURL`如果`url`不是絕對位址,那麼將會加在其前面。
//當axios使用相對位址時這個設定非常方便
//在其執行個體中的方法
baseURL:'http://some-domain.com/api/',
//`transformRequest`允許請求的資料在傳到伺服器之前進行轉化。
//這個只適用於`PUT`,`GET`,`PATCH`方法。
//數組中的最後一個函數必須返回一個字串,一個`ArrayBuffer`,或者`Stream`
transformRequest:[function(data){
//依自己的需求對請求資料進行處理
return data;
}],
//`transformResponse`允許返回的資料傳入then/catch之前進行處理
transformResponse:[function(data){
//依需要對資料進行處理
return data;
}],
//`headers`是自訂的要被發送的頭資訊
headers:{'X-Requested-with':'XMLHttpRequest'},
//`params`是請求串連中的請求參數,必須是一個純對象,或者URLSearchParams對象
params:{ ID:12345 },
//`paramsSerializer`是一個可選的函數,是用來序列化參數
//例如:(https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
paramsSerializer: function(params){
return Qs.stringify(params,{arrayFormat:'brackets'})
},
//`data`是請求提需要設定的資料
//只適用於應用的'PUT','POST','PATCH',要求方法
//當沒有設定`transformRequest`時,必須是以下其中之一的類型(不可重複。):
//-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams
//-僅瀏覽器:FormData,File,Blob
//-僅Node:Stream
data:{
firstName:'fred'
},
//`timeout`定義請求的時間,單位是毫秒。
//如果請求的時間超過這個設定時間,請求將會停止。
timeout:1000,
//`withCredentials`表明是否跨域請求,
//應該是用認證
withCredentials:false //預設值
//`adapter`適配器,允許自訂處理請求,這會使測試更簡單。
//返回一個promise,並且提供驗證返回(查看[response docs](#response-api))
adapter:function(config){
/*...*/
},
//`xsrfHeaderName` 是http頭(header)的名字,並且該頭攜帶xsrf的值
xrsfHeadername:'X-XSRF-TOKEN',//預設值
//`onUploadProgress`允許處理上傳過程的事件
onUploadProgress: function(progressEvent){
//本地過程事件發生時想做的事
},
//`onDownloadProgress`允許處理下載過程的事件
onDownloadProgress: function(progressEvent){
//下載過程中想做的事
},
//`maxContentLength` 定義http返回內容的最大容量
maxContentLength: 2000,
//`validateStatus` 定義promise的resolve和reject。
//http返回狀態代碼,如果`validateStatus`返回true(或者設定成null/undefined),promise將會接受;其他的promise將會拒絕。
validateStatus: function(status){
return status >= 200 && stauts < 300;//預設
},
//`httpAgent` 和 `httpsAgent`當產生一個http或者https請求時分別定義一個自訂的代理,在nodejs中。
//這個允許設定一些選選個,像是`keepAlive`--這個在預設中是沒有開啟的。
httpAgent: new http.Agent({keepAlive:treu}),
httpsAgent: new https.Agent({keepAlive:true}),
//`proxy`定義伺服器的主機名稱字和連接埠號碼。
//`auth`表明HTTP基本認證應該跟`proxy`相串連,並且提供認證。
//這個將設定一個'Proxy-Authorization'頭(header),覆蓋原先自訂的。
proxy:{
host:127.0.0.1,
port:9000,
auth:{
username:'cdd',
password:'123456'
}
},
//`cancelTaken` 定義一個取消,能夠用來取消請求
//(查看 下面的Cancellation 的詳細部分)
cancelToke: new CancelToken(function(cancel){
})
}
2)、響應資料的格式:
{
//`data`是伺服器的提供的回複(相對於請求)
data{},
//`status`是伺服器返回的http狀態代碼
status:200,
//`statusText`是伺服器返回的http狀態資訊
statusText: 'ok',
//`headers`是伺服器返回中攜帶的headers
headers:{},
//`config`是對axios進行的設定,目的是為了請求(request)
config:{}
}
使用 then ,你會接受打下面的資訊
axios.get('/user/12345')
.then(function(response){
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
使用 catch 時,或者傳入一個 reject callback 作為 then 的第二個參數,那麼返回的錯誤資訊將能夠被使用。
6.Axios的攔截器
你可以在請求或者返回被 then 或者 catch 處理之前對它們進行攔截。
1)、請求攔截器
axios.interceptors.request.use(
function (config) {//config參數是請求的配置
config.url=‘api/goodslists’;//發送請求前,修改請求的url
return config
},
function (error) {
console.log('請求失敗')
return Promise.reject(error)
}
);
2)、響應攔截器
axios.interceptors.response.use(
function (response) {//response參數是響應對象
response.data.unshift({“goodsid”:“商品編號”,“goodsname”:“商品名稱”,“goodsprice”:“商品價格”});//給響應的資料增加一個對象
return response;
}, function (error) {
console.log('響應出錯')
return Promise.reject(error)
})
3)、請求的代碼:
let vueobj = this;
axios.request({
method:'get',
url:'api/readers',
params:{
"goodsid":"01002"
}
})
.then(function (response) {
console.log(response.data);
vueobj.goodslist = response.data;
})
.catch(function (error) {
console.log(error);
}); 7.Ajax,jQuery ajax,axios和fetch的區別
Ajax:
ajax自然不必說,最早出現的發送後端請求技術,隸屬於原始js中,核心使用XMLHttpRequest對象,多個請求之間如果有先後關係的話,就會出現回調地獄。
Jquery Ajax:
是jQuery架構中的發送後端請求技術,由於jQuery是基於原始的基礎上做的封裝,所以,jquery Ajax自然也是原始ajax的封裝
Fetch:
fetch號稱是AJAX的替代品,是在ES6出現的,使用了ES6中的promise對象。Fetch是基於promise設計的。Fetch的代碼結構比起ajax簡單多了,參數有點像jQuery ajax。但是,一定記住fetch不是ajax的進一步封裝,而是原生js。Fetch函數就是原生js,沒有使用XMLHttpRequest對象。
axios:
axios不是原生JS的,需要進行安裝,它不帶可以在用戶端使用,也可以在nodejs端使用。Axios也可以在請求和響應階段進行攔截。同樣也是基於promise對象的。具體參照axios的概念
謝謝,加油。