此筆記版本 v0.19.0

• axios 基本用法 與 Config 詳解

建立 axios 實體 好處 (axios.create)

1. 統一套用 Config
2. 統一管理 API，日後修改容易 (分開檔案、Import)
3. 減少 URL 冗長更易讀 (baseURL運用)

建立 axios 實體 範例

• api.js 統一管理 API Call Url
• 使用 import 引入該 API

  // 此為 api.js 檔案 (統一管理 API)
  import axios from 'axios'

  const userRequest = axios.create({
    baseURL: 'http://localhost:3000',
    headers: { 'Content-Type': 'application/json' },
  })

  // 可以統一管理 API Call
  const postFunc = data => userRequest.post('/users', data)
  const getFunc = url => userRequest.get(url)

  // 要使用該 api 的檔案，使用 import將方法載入
  import { postFunc, getFunc } from 'api.js'; 
  run()
  async function run() {
    try {
      // 可以連 URL 都進行封裝
      const post1 = await postFunc({ name: '123' })
      const post2 = await postFunc({ name: '456' })
      
      // 上面的方法更佳 API 應存在同一個檔案作管理
      const post3 = await userRequest.post('/users', { name: '789' })
      
      const get = await getFunc('/users')
      console.table(get.data)
    } catch (error) {
      throw new Error(error)
    }
  }

配置的優先順序 (低到高)

• 實體建立時的配置 (最低)
• 覆蓋原始設定
• 發送請求的 config 參數 (最高)

  // 不設定即採用默認值 timeout 為 0
  let instance = axios.create()

  // 覆蓋原始 instance
  instance.defaults.timeout = 2500

  // 發送請求的 config
  instance.get('/longRequest', {
    timeout: 5000 // 採用此 config 設定
  })

全域默認值 (可略)

• 可以利用 console.log(axios.default) 查詢內容
• axios.defaults.common['表頭名'] 通用設定
• axios.defaults.post['表頭名'] post方法用設定

  console.log(axios.default)
  axios.defaults.baseURL = 'url'
  axios.defaults.headers.common['Content-Type'] = '~'
  axios.defaults.headers.post['Content-Type'] = '~'

錯誤偵測 (Handling Errors)

• config: validateStatus

  // 自定 reject 狀態碼範圍
  const config = {
    validateStatus(status) { return status >= 200 && status < 300 },
  }

  axios.get('/user/12345')
    .catch((error) => {
      if (error.response) {
        // 當狀態碼不在 validateStatus 設定的範圍時進入
        // 有 data / status / headers 參數可用
        console.log(error.response.status)
      } else if (error.request) {
        // 發送請求，但沒有接到回應
        // error.request is an instance of XMLHttpRequest in the browser 
        // and an instance of http.ClientRequest in node.js
        console.log(error.request)
      } else {
        // 在設定 request 時出錯會進入此
        console.log('Error', error.message)
      }
      console.log(error.config)
    })

檔案上傳範例

• 將檔案轉成 Blob 並使用 FormData API 格式傳輸
• Content-Type 必須設成 multipart/form-data

建立 remote img

  axios({
    method: 'get',
    url: 'http://bit.ly/2mTM3nY',
    responseType: 'stream',
  })
    .then((response) => { 
      response.data.pipe(fs.createWriteStream('Img.jpg')) 
    })

以下 本人太菜還沒用過 用到再回來補

攔截器 (Interceptors)

• 攔截 請求/回應 於 then/catch 前

取消 (Cancellation)

• 利用 cancel token 取消請求

使用 application/x-www-form-urlencoded

• axios 預設使用 JSON

參考資料

axios Github
axios 中文文檔(有些省略的)
axios小筆記
使用Axios你的API都怎麼管理？