axios介紹
axios 是一個基于Promise的HTTP庫，可以在瀏覽器和NodeJS中使用
特征
- 在客戶端創建
XMLHTTPRequest - 在服務器創建
HTTP - 能攔截請求和響應
- 處理請求和響應數據
- 取消請求
- 自動轉化成JSON數據
- 客戶端支持防御
XSRF
瀏覽器支持
- IE9及以上
使用axios示例
get
// get 請求的兩種方式
axios.get('/users?id=123')
.then(function (response) {
// 響應成功
})
.catch(function (err) {
// 響應失敗
})
axios.get('/users',{
params: {
id: 1234
}
})
.then()
.catch()
post
axios.post('/users',{
firstName: 'y',
lastName: 'f'
})
.then()
.catch()
concurrent requests
function getUsersName () {
return axios.get('/users/name')
}
function getUsersCount() {
return axios.get('/users/count')
}
axios.all([getUsersName(),getUsersCount()])
.then(axios.spread(function (nameRes, countRes) {
}))
axios API
axios 通過配置發送請求
// post請求設置
axios({
method: 'post',
url: '/user/1234',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
// 默認是get請求
axios('/users/1234')
http 各種請求方式
| 方法 | 描述 |
|---|---|
| get | 請求制定的頁面信息，并返回實體主體 |
| delete | 請求服務器刪除制定頁面 |
| head | 類似get請求，但沒有實體主體，只有報頭 |
| options | 允許客戶端查看服務器的性能 |
| post | 向制定資源提交數據進行處理請求 |
| put | 從客戶端向服務器傳送的數據取代制定的文檔內容 |
| patch | 實體中包含一個表，表中說明與該URL所表示的原內容的區別 |
axios 請求方法
axios.request(config)-
axios.get(url,[config])，get請求方式沒有第二個參數data，它的請求數據是以params的形式發送 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不需要特別配置
創建實例
實例可以使用的方法和axios可以使用的方法相同
var instance = axios.create({
// 進行配置
});
config
以下是可以進行配置的選項
{
url: '/user',
method: 'get',
baseURL: 'https://some-domain.com/api/',
// 在發送請求之前對請求做一些處理，對應的是一個函數數組
transformRequest: [function (data) {
// 可以對data做一些處理
return data;
}],
// 允許我們在數據傳送到`then`/`catch`之前對數據進行改動
transformResponse: [ function (data) {
// 可以對data做一些處理
return data;
}],
// 需要被發送的自定義請求頭信息
headers: {'X-Requested-With':'XMLHttpRequest'},
// 請求參數
params: {
id: 123
},
paramsSerializer: function (params) {
// 讓參數序列化
return Qs.stringigy(params,{arrayFormat:'brackets'})
},
// 只適用于 post put patch
data: {
first: 'yf'
},
// 請求超過延遲事件，請求就會停止
timeout: 1000,
// 是否是跨域請求
withCredentials: false,
// 允許自定義處理請求
adapter: function (config) {
},
// http基礎的認證應該被使用，并提供證書，會設置 `Authorization`頭信息
auth: {
username: 'zhangsan',
password: '123'
},
// 返回的數據類型
responseType: 'json',
// 默認
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
// 上傳進度事件
onUploadProgress: function (progressEvent) {
},
// 下載進度事件
onDownloadProgress: function (progressEvent) {
},
// 響應內容的最大值
maxContentLength: 2000,
// 定義了是否根據 http 相應的狀態碼。來resolve 或者 reject promise
validateStatus: function (status) {
return status > 200 && status < 300;
},
// 允許重定向的最大數
maxRedirects: 5,
// 自定義代理，http / https 代理
httpAgent: new http.Agent({keeyAlive:true}),
httpsAgent: new https.Agent({keeyAlive:true}),
// 代理認證，并提供證書
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'sk',
password: 'work hard'
}
},
// 定義了一個用于取消請求的 cancel token
cancelToken: new CancelToken(function (cancel) {});
}
response data
{
data: {},
statue: 200,
statueText: 'OK',
headers: {},
config: {}
}
默認配置
全局默認配置
對所有請求都有效
axios.defaults.baseURL = 'http:/api'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
自定義的實例默認配置
var instance = axios.create({
baseURL: 'https://api.example.com'
});
配置中的優先級
一個實例中的配置的優先級
- 請求中的config參數配置，等級最高
- 實例中的默認配置，等級次之
-
lib/defauts.js配置最低
// 創建一個實例的配置
var instance = axios.create({
// 實例默認配置
baseURL: 'https://api.example.com'
});
// 在實例已創建后修改默認值
instance.defaults.timeout = 2500;
// 請求中的配置
instance.get('/users',{
timeout: 3000
});
攔截器
在到達then/catch之前攔截
// 對請求添加攔截器
axios.interceptor.request.use(function (config) {
// 請求前做些什么
return config
},function (err) {
// 對象請求錯誤做些什么
return Promise.reject(err)
});
// 對響應添加響應器
axios.interceptor.response.use(function (res) {
// 對相應數據做些什么
return res;
},function (err) {
// 對象請求錯誤做些什么
return Promise.reject(err);
};
移除攔截器
var myInterceptor = axios.interceptor.request.use(function () {});
axios.interceptors.request.eject(myInterceptor);
給自定義的axios實例添加攔截器
var instance = axios.create();
instance.interceptors.request.use(function(){})
錯誤處理
axios.get('/users')
.then()
.catch(function (err) {
if (err.response) {
// 請求已將發出，但是服務器的響應碼不在2XX范圍內
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
}else if (err.request) {
// 有請求，但是沒有響應
// err.request 是 xhr 或者 clientRequest
}else {
// 請求發送錯誤
console.log('Error',error.message)
}
// 無論那種錯誤，都打印出config信息
console.log(error.config);
})
取消
通過兩種方式來取消請求
// 第一種方式
var cancelToken = axios.CancelToken;
var cancel;
axios.get('/user/1234',{
cancelToken: new CancelToken(function (c) {
cancel = c;
});
})
// 取消請求
cancel();
// 第二種方式
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
source.cancel('Operation canceled by the user.');
