axios 攔截器 的使用方法

有時候我們需要對axios傳送的請求做統一處理，這裡就需要使用攔截器

• 首先要建立一個axios示例

  import axios from 'axios'
  const $http = axios.create({
    baseURL: '/api/',
    timeout: 5000 // request timeout
  })

• 請求攔截器,在請求發起之前攔截處理

  // http response 攔截器
  $http.interceptors.response.use(
    config => {
        //攔截請求，做統一處理
        console.log('即將請求資料');
        console.log(config);
        return config
    },
    error => {
    return Promise.reject(error) 
  })

• 響應攔截器,在介面返回資料後 響應處理之前 攔截處理

  // http response 攔截器
  $http.interceptors.response.use(
    response => {
        //攔截響應，做統一處理
        console.log('資料請求成功');
        console.log(response);
        const res = response.data
        return res
    },
    //介面錯誤狀態處理，也就是說無響應時的處理
    error => {
    return Promise.reject(error.response.status) // 返回介面返回的錯誤資訊
  })

• 之後就可以把這個axios示例暴露出去，正常使用即可

  export default $http

本作品採用《CC 協議》，轉載必須註明作者和本文連結