axios
- 基于promise用于瀏覽器和node.js的http客戶端
- 支持瀏覽器和node.js
- 支持promise
- 能攔截請求和響應
- 自動轉換JSON數(shù)據(jù)
- 能轉換請求和響應數(shù)據(jù)
axios基礎用法
- get和 delete請求傳遞參數(shù)
- 通過傳統(tǒng)的url 以 ? 的形式傳遞參數(shù)
- restful 形式傳遞參數(shù)
- 通過params 形式傳遞參數(shù)
- post 和 put 請求傳遞參數(shù)
- 通過選項傳遞參數(shù)
- 通過 URLSearchParams 傳遞參數(shù)
# 1. 發(fā)送get 請求
axios.get('http://localhost:3000/adata').then(function(ret){
# 拿到 ret 是一個對象 所有的對象都存在 ret 的data 屬性里面
// 注意data屬性是固定的用法，用于獲取后臺的實際數(shù)據(jù)
// console.log(ret.data)
console.log(ret)
})
# 2. get 請求傳遞參數(shù)
# 2.1 通過傳統(tǒng)的url 以 ? 的形式傳遞參數(shù)
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
console.log(ret.data)
})
# 2.2 restful 形式傳遞參數(shù)
axios.get('http://localhost:3000/axios/123').then(function(ret){
console.log(ret.data)
})
# 2.3 通過params 形式傳遞參數(shù)
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret){
console.log(ret.data)
})
#3 axios delete 請求傳參 傳參的形式和 get 請求一樣
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret){
console.log(ret.data)
})
# 4 axios 的 post 請求
# 4.1 通過選項傳遞參數(shù)
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
# 4.2 通過 URLSearchParams 傳遞參數(shù)
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
console.log(ret.data)
})
#5 axios put 請求傳參 和 post 請求一樣
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
axios 全局配置
# 配置公共的請求頭
axios.defaults.baseURL = 'https://api.example.com';
# 配置 超時時間
axios.defaults.timeout = 2500;
# 配置公共的請求頭
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios 攔截器
- 請求攔截器
- 請求攔截器的作用是在請求發(fā)送前進行一些操作
- 例如在每個請求體里加上token，統(tǒng)一做了處理如果以后要改也非常容易
- 響應攔截器
- 響應攔截器的作用是在接收到響應后進行一些操作
- 例如在服務器返回登錄狀態(tài)失效蓉驹，需要重新登錄的時候滥朱，跳轉到登錄頁
# 1. 請求攔截器
axios.interceptors.request.use(function(config) {
console.log(config.url)
# 1.1 任何請求都會經過這一步 在發(fā)送請求之前做些什么
config.headers.mytoken = 'nihao';
# 1.2 這里一定要return 否則配置不成功
return config;
}, function(err){
#1.3 對請求錯誤做點什么
console.log(err)
})
#2. 響應攔截器
axios.interceptors.response.use(function(res) {
#2.1 在接收響應做些什么
var data = res.data;
return data;
}, function(err){
#2.2 對響應錯誤做點什么
console.log(err)
})
