axios中文文檔

時間 2019-11-10

標籤 axios 中文文檔简体版

原文原文鏈接

axios

基於http客戶端的promise，面向瀏覽器和nodejshtml

特點

瀏覽器端發起XMLHttpRequests請求node
node端發起http請求jquery
支持Promise APIios
監聽請求和返回git
轉化請求和返回es6
取消請求github
自動轉化json數據npm
客戶端支持抵禦json

安裝

使用npm：axios

$ npm i axiso

使用 bower

$ bower instal axios

使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

示例

使用一個 GET 請求

//發起一個user請求，參數爲給定的ID
axios.get( '/user?ID=1234')
.then( function(respone){
console.log(response);
})
.catch( function(error){
console.log(error);
});
//上面的請求也可選擇下面的方式來寫
axios.get( '/user',{
params:{
ID:12345
}
})
.then( function(response){
console.log(response);
})
.catch( function(error){
console.log(error)
});

發起一個 POST 請求

axios.post('/user',{
    firstName:'friend', lastName:'Flintstone' }) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });

發起一個多重併發請求

function getUserAccount(){ return axios.get('/user/12345'); } function getUserPermissions(){ return axios.get('/user/12345/permissions'); } axios.all([getUerAccount(),getUserPermissions()]) .then(axios.spread(function(acc,pers){ //兩個請求如今都完成 }));

axios API

axios 可以在進行請求時進行一些設置。

axios(config)

//發起 POST請求

axios({ method:'post', url:'/user/12345', data:{ firstName:'Fred', lastName:'Flintstone' } });

axios(url[,config])

//發起一個GET請求
axios('/user/12345/);

請求方法的重命名。

爲了方便，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]])

注意

當時用重命名方法時 url , method ,以及 data 特性不須要在config中設置。

併發 Concurrency

有用的方法

axios.all(iterable)

axios.spread(callback)

建立一個實例

你能夠使用自定義設置建立一個新的實例

axios.create([config])

var instance = axios.create({
    baseURL:'http://some-domain.com/api/', timeout:1000, headers:{'X-Custom-Header':'foobar'} });

實例方法

下面列出了一些實例方法。具體的設置將在實例設置中被合併。

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]])

請求設置

如下列出了一些請求時的設置。只有 url 是必須的，若是沒有指明的話，默認的請求方法是GET .

{
//`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){
/*...*/
},
//`auth`代表HTTP基礎的認證應該被使用，而且提供證書。
//這個會設置一個`authorization` 頭（header），而且覆蓋你在header設置的Authorization頭信息。
auth:{
username:'janedoe',
password:'s00pers3cret'
},
//`responsetype`代表服務器返回的數據類型，這些類型的設置應該是
//'arraybuffer','blob','document','json','text',stream'
responsetype: 'json',
//`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){
})
}

返回響應概要 Response Schema

一個請求的返回包含如下信息

{
//`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 的第二個參數，那麼返回的錯誤信息將可以被使用。

默認設置（Config Default)

你能夠設置一個默認的設置，這設置將在全部的請求中有效。

全局默認設置 Global axios defaults

axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';

實例中自定義默認值 Custom instance default

//當建立一個實例時進行默認設置
var instance = axios.create({ baseURL:'https://api.example.com' }); //在實例建立以後改變默認值 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

設置優先級 Config order of precedence

設置(config)將按照優先順序整合起來。首先的是在 lib/defaults.js 中定義的默認設置，其次是 defaults 實例屬性的設置，最後是請求中 config 參數的設置。越日後面的等級越高，會覆蓋前面的設置。

看下面這個例子：

//使用默認庫的設置建立一個實例，
//這個實例中，使用的是默認庫的timeout設置，默認值是0。 var instance = axios.create(); //覆蓋默認庫中timeout的默認值 //此時，全部的請求的timeout時間是2.5秒 instance.defaults.timeout = 2500; //覆蓋該次請求中timeout的值，這個值設置的時間更長一些 instance.get('/longRequest',{ timeout:5000 });

攔截器 interceptors

你能夠在 請求 或者 返回 被 then 或者 catch 處理以前對他們進行攔截。

//添加一個請求攔截器
axios.interceptors.request. use(function(config){
//在請求發送以前作一些事
return config;
}, function(error){
//當出現請求錯誤是作一些事
return Promise.reject(error);
});
//添加一個返回攔截器
axios.interceptors.response. use(function(response){
//對返回的數據進行一些處理
return response;
}, function(error){
//對返回的錯誤進行一些處理
return Promise.reject(error);
});

若是你須要在稍後移除攔截器,你能夠

var myInterceptor = axios.interceptors.request.use(function(){/*...*/});
axios.interceptors.rquest.eject(myInterceptor);

你能夠在一個axios實例中使用攔截器

var instance = axios.create();
instance.interceptors.request. use(function(){/*...*/});

錯誤處理 Handling Errors

axios.get( 'user/12345')
.catch( function(error){
if(error.response){
//存在請求，可是服務器的返回一個狀態碼
//他們都在2xx以外
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else{
//一些錯誤是在設置請求時觸發的
console.log('Error',error.message);
}
console.log(error.config);
});

你能夠使用 validateStatus 設置選項自定義HTTP狀態碼的錯誤範圍。

axios.get( 'user/12345',{
validateStatus: function(status){
return status < 500;//當返回碼小於等於500時視爲錯誤
}
});

取消 Cancellation

你能夠使用 cancel token 取消一個請求

axios的cancel token API是基於**cnacelable promises proposal**，其目前處於第一階段。

你能夠使用 CancelToke.source 工廠函數建立一個cancel token，以下：

var CancelToke = axios.CancelToken;
var source = CancelToken.source();
axios.get( '/user/12345', {
cancelToken:source.toke
}). catch(function(thrown){
if(axiso.isCancel(thrown)){
console.log( 'Rquest canceled', thrown.message);
} else{
//handle error
}
});
//取消請求(信息參數設可設置的)
source.cancel( "操做被用戶取消");

你能夠給 CancelToken 構造函數傳遞一個executor function來建立一個cancel token:

var CancelToken = axios.CancelToken;
var cancel;
axios.get( '/user/12345', {
cancelToken: new CancelToken(function executor(c){
//這個executor 函數接受一個cancel function做爲參數
cancel = c;
})
});
//取消請求
cancel();

注意：你能夠使用同一個cancel token取消多個請求。

使用 application/x-www-form-urlencoded 格式化

默認狀況下，axios串聯js對象爲 JSON 格式。爲了發送 application/x-wwww-form-urlencoded格式數據，

你能夠使用一下的設置。

瀏覽器 Browser

在瀏覽器中你能夠以下使用 URLSearchParams API:

var params = new URLSearchParams(); params.append('param1','value1'); params.append('param2','value2'); axios.post('/foo',params);

注意： URLSearchParams 不支持全部的瀏覽器，可是這裏有個墊片

（poly fill）可用（確保墊片在瀏覽器全局環境中）

其餘方法：你能夠使用 qs 庫來格式化數據。

var qs = require('qs');
axios.post( '/foo', qs.stringify({'bar':123}));

Node.js

在nodejs中，你能夠以下使用 querystring :

var querystring = require('querystring');
axios.post( 'http://something.com/', querystring.stringify({foo:'bar'}));

你一樣能夠使用 qs 庫。

promises

axios 基於原生的ES6 Promise 實現。若是環境不支持請使用墊片 .

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。