1. axios 的基本特性
axios是基於Promise用於瀏覽器和node.js的HTTP客戶端
特徵：
- 支持瀏覽器和node.js
- 支持 promise
- 能攔截請求和響應
- 自動轉換JSON數據
2. axios 的基本用法
axios.get('/adata').then(ret=>{
console.log(ret.data) //data屬性固定，用於獲取後臺響應數據
})
3. axios的參數傳遞
1.get
通過
restful傳遞參數
也可以通過params選項傳遞參數
//restful
axios.get('http://localhost:3000/axios/123')
.then(function (ret) {
console.log(ret.data);
})
//params
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
})
.then(function (ret) {
console.log(ret.data);
})
2.delete
與get傳參類似
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
})
.then(function (ret) {
console.log(ret.data);
})
3.post
通過選項傳遞參數（默認傳遞json格式的數據）
傳字符串的格式需要 new URLSearchParams();
//json
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
})
.then(function (ret) {
console.log(ret.data);
})
//字符串
var params = new URLSearchParams();
params.append('uname', 'lisi');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params)
.then(function (ret) {
console.log(ret.data);
})
4.put
與post類似
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
})
.then(function (ret) {
console.log(ret.data);
})
3. axios響應結果及全局配置
1.響應結果主要屬性
data實際響應回來的數據headers響應頭status響應狀態碼
2.Axios中全局配置
- 配置公共的基準URL axios.defaults.baseURL
- 配置超時時間 axios.defaults.timeout
- 配置公共的請求頭 axios.defaults.headers.common[‘Authorization’]
//配置請求基準url
axios.defaults.baseURL = 'http://localhost:3000/';
axios.get('axios-json').then(function (ret) {
console.log(ret.data.uname);
})
4. axios 攔截器
1.請求攔截器
在請求發出之前設置一些信息
axios.interceptors.request.use(function (config) {
console.log(config.url);
config.headers.mytoken = 'nihao';
return config;
},
function (err) {
console.log(err);
})
2.響應攔截器
獲取數據前對數據加工
axios.interceptors.response.use(function (res) {
// console.log(res);
var data = res.data
return data;
},
function (err) {
console.log(err);
})
axios.get('http://localhost:3000/adata').then(function (data) {
console.log(data)
})
async/await的基本用法（es7引入，方便異步操作）
async關鍵字用在函數上（async函數的返回值是promise實例對象）await關鍵字用於async函數中（await可以得到異步的結果）
async function queryData(id){
const ret = await axios.get('/data');
return ret;
}
queryData().then(ret=>{
console.log(ret)
})