Axios參數詳解

一、請求AOP參數

AOP(Aspect Oriented Programming)，面向切面編程，是一種軟體開發的方法，它將橫切關注點與業務邏輯分離開來，用某種方法將這些關注點織入對象。

在Axios中，請求AOP參數指的是在請求的不同時期，分別執行的函數，可以被稱為「切面」。比如說，你可以在請求耗時比較長的時候，顯示一個進度條。這時候你可以用「onUploadProgress」來做到這一點。

axios.post('/api/upload', formData, {
  onUploadProgress: function(progressEvent) {
    // 處理上傳進度事件
  }
})

在上面的代碼中，我們通過傳遞一個方法來監視上傳進度。

除了「onUploadProgress」，Axios中還提供了許多其他的AOP參數，包括「onDownloadProgress」、「onUploadProgress」、「onHeadersReceived」、「onRequest」以及「onResponse」等等。可以根據需要選擇使用。

二、請求API參數

API(Application Programming Interface)，應用程序編程介面，是一組定義了軟體應該如何與其他組件進行交互的介面。在Axios中，請求API參數指的是請求方式和其他相關參數，比如「get」、「post」、「put」、「delete」等。

下面是一個請求的完整示例：

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

在上面的代碼中，我們使用了「post」方法向「/user/12345」發送了一個數據對象。我們還可以使用其他方法，比如「get」、「put」以及「delete」等。

Axios API參數有很多，包括URL、請求方法、請求頭、請求參數(authentication，params/data/query、headers、baseURL、timeout等)。更多Axios API參數詳見官方文檔。

三、響應API參數

在Axios中，響應API參數指的是響應數據中的各個參數，包括status、data、headers等。

axios.get('/api/user')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status));
    console.log(response.headers));
    console.log(response.config));
  })
  .catch(function (error) {
    console.log(error);
  });

在上面的代碼中，我們使用了「get」方法獲取「/api/user」數據，並處理了響應數據。我們可以訪問響應對象的各個部分，如數據部分的「response.data」、狀態碼「response.status」，甚至可以在「response.config」中檢查請求時的配置選項等。

Axios響應API參數非常豐富，還包括「statusText」、「request」、「headers」、「config」、「data」等等。根據需要靈活使用。

四、並發API參數

在Axios中，我們可以使用「axios.all」和「axios.spread」兩個方法實現並發請求。其中，「axios.all」用於發送多個請求，而「axios.spread」則用於處理「axios.all」返回的多個響應結果。

axios.all([
  axios.post('/api/user', {
    name: 'John'
  }),
  axios.post('/api/user', {
    name: 'Jim'
  })
])
.then(axios.spread(function (res1, res2) {
  console.log(res1.data);
  console.log(res2.data);
}));

在上面的代碼中，我們通過「axios.all」方法發送了兩個請求。通過使用「axios.spread」，我們能夠訪問多個響應結果，如「res1」和「res2」。

使用並發API參數時我們可以根據需要發送不同類型的請求（GET、POST等），而且可以並發地發送多個請求，提升效率，讓用戶體驗更加良好。

五、攔截器參數

在Axios中，攔截器參數是非常重要的參數，比如我們可以通過攔截器來處理錯誤、處理請求頭、全局處理請求參數、loading提示等等。

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);
});

在上面的代碼中，我們通過「axios.interceptors.request.use」和「axios.interceptors.response.use」兩個方法，分別在請求前和響應後進行攔截。在這裡，我們可以訪問request請求的config對象，同時可以直接操作相應的response。通過這個功能，我們可以很方便的全局配置請求和響應。

六、總結

Axios參數相當豐富，我們可以根據實際需要選取不同的API，實現請求參數、響應參數、AOP、並發、攔截器參數等等功能，達到優秀的用戶體驗，並且提升我們的工作效率。

示例代碼：

// 配置默認參數
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

// 添加請求攔截器
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);
});

// 請求數據
axios.get('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 並發請求
axios.all([
  axios.get('/user/12345'),
  axios.get('/user/12346')
])
.then(axios.spread(function (user1, user2) {
  console.log(user1);
  console.log(user2);
}));

// 使用query string參數
axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});