深入淺出Axios API

一、基礎介紹

Axios是一個基於Promise的HTTP客戶端，可以在瀏覽器和Node.js中使用。其最主要的特點是支持瀏覽器和Node.js兩種環境，並且可以通過async/await語法進行完美的非同步控制。 Axios可以很方便地攔截請求和響應，實現錯誤處理、上傳進度監控等任務。使用Axios還可以讓我們從傳統的XMLHttpRequest架構中解放出來，使用更高效合理的代碼結構來開發應用程序。

二、核心功能

1、發起HTTP請求
Axios可以使用多種方式發起HTTP請求，包括GET、POST、PUT、PATCH、DELETE等HTTP方法。以下是一個使用Axios發起GET請求的示例：

axios.get('/api/user?id=123')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

2、攔截請求和響應
Axios可以通過攔截器對請求和響應進行攔截、轉換，可以進行TOKEN驗證和請求頭配置。以下是一個攔截器示例：

axios.interceptors.request.use(config => {
  config.headers.Authorization = getToken();
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if(error.response.status === 401){
    //處理未授權的操作
  }
  return Promise.reject(error);
});

3、錯誤處理
Axios可以對請求進行錯誤處理，包括網路錯誤、伺服器端錯誤等。以下是一個錯誤處理示例：

axios.get('/api/user?id=123')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if(error.response){
      console.log(error.response.status);
    }else if(error.request){
      console.log('網路錯誤');
    }else{
      console.log('請求錯誤');
    }
  });

三、高級功能

1、請求和響應配置
Axios可以配置請求和響應的參數，包括超時時間、請求頭信息、響應類型、withCredentials等。以下是一個請求和響應配置示例：

axios({
  method: 'post',
  url: '/api/user',
  data: {
    name: '張三',
    age: '20'
  },
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json'
  },
  responseType: 'json',
  withCredentials: true
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error.statusCode);
});

2、取消請求
Axios提供了一個取消HTTP請求的API，可以對某個請求進行取消操作。以下是一個取消請求示例：

const source = axios.CancelToken.source();

axios.get('/api/user?id=123', {
  cancelToken: source.token
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if(axios.isCancel(error)){
    console.log('請求已被取消');
  }else{
    console.log('網路錯誤');
  }
});

setTimeout(() => {
  source.cancel('取消請求');
}, 1000);

3、上傳和下載進度監控
Axios可以監控上傳和下載的進度，提供了onDownloadProgress和onUploadProgress兩個API。以下是一個上傳進度監控示例：

axios.post('/api/upload', data, {
  onUploadProgress: progressEvent => {
    console.log(progressEvent.loaded / progressEvent.total * 100 + '%');
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.log(error);
});

四、總結

本文主要介紹了Axios API的基本使用、核心功能和高級功能，包括發起HTTP請求、攔截請求和響應、錯誤處理、請求和響應配置、取消請求和上傳下載進度監控等。使用Axios可以讓我們更快更高效地開發應用程序，並且可以對請求和響應進行自由靈活地控制。