# axios 學習筆記

標籤（空格分隔）： 資料請求 axios

---

## 1. 下載與安裝
+ npm i axios -S
+  import axios from 'axios'
## 2. 使用 
+ get請求
```
//引數拼接的寫法
 axios.get('/index?ID=12345').then(res => {
    console.log(res)
 }).catch(err => {
    console.log(err)
 })
 //引數以物件的方式傳入
  axios.get('/index'{
  params: {
  ID: 12345
  }
  }).then(res 
 
=> {
    console.log(res)
 }).catch(err => {
    console.log(err)
 })
```
+ post請求
```
axios.post('/user', { //注意這裡和get中傳入物件不同,這裡直接傳入物件,而get中需要傳入一個屬性為params的物件,要傳的引數物件作為params的屬性值
    firstName: 'Fred',
    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([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    
 
// 兩個請求現在都執行完成 acct perms 分別代表兩個請求的返回值
  }));
```
+ 可以通過向 axios 傳遞相關配置來建立請求
```
// 傳送 POST 請求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    name: 'jack',
    age: 18
  }
});
// 傳送 GET 請求（預設的方法）
axios('/user/12345');
```
+ 配置項
 - 可以通過axios.default設定全域性預設屬性
 如配置根路徑:axios.default.baseURL = 'http://localhost:8080'
 - 也可以自定義例項預設值
```
var instance = axios.create({
  baseURL: 'https://api.example.com'
});
//這樣就可以通過例項來發送請求了
instance.get('/index')
```
## 3. 攔截器
在請求或響應在被then或catch處理前攔截它們
```
//新增請求攔截器
axios.interceptor.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);
  });
```