在 vue-cil 裡封裝一個簡單的 axios

NiZerin發表於2019-04-25
Vue封裝iOS

嘗試在 vue 中整合 axios ，便動手學習一下，主要還是因為滿足業務需求。

安裝 axios

$ npm install axios

新建 axios.js

引入 axios

import axios from 'axios'

建立 axios 例項

const service = axios.create({
  // headers: {
  //   TODO
  // },
  // baseURL: process.env.BASE_API, // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
  timeout: 10000
})

響應攔截

service.interceptors.response.use(
  response => {
    // dataAxios 是 axios 返回資料中的 data
    const dataAxios = response.data
    // 狀態碼
    const { ERRORCODE } = dataAxios
    // 根據 ERRORCODE 進行判斷
    if (ERRORCODE === undefined) {
      // 如果沒有 ERRORCODE 代表這不是專案後端開發的介面
      return dataAxios
    } else {
      // 有 ERRORCODE 代表這是一個後端介面 可以進行進一步的判斷
      switch (ERRORCODE) {
        case 0:
          // [ 示例 ] ERRORCODE === 0 代表沒有錯誤
          return dataAxios.RESULT
        case '0':
          // [ 示例 ] ERRORCODE === '0' 代表沒有錯誤
          return dataAxios.RESULT
        case 302:
          // 如果後臺返回302，需要跳轉到首頁，讓使用者登入
          window.location.href = dataAxios.URL
          // 需要重新登入
          break
        default:
          // 不是正確的 ERRORCODE
          if (process.env.NODE_ENV === 'development') {
            console.log('>>>>>> Error >>>>>>')
            console.log(dataAxios)
          }
          return Promise.reject(dataAxios)
      }
    }
  },
  error => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = '請求錯誤'
          break
        case 401:
          error.message = '未授權，請登入'
          break
        case 403:
          error.message = '拒絕訪問'
          break
        case 404:
          error.message = `請求地址不存在: ${error.response.config.url}`
          break
        case 408:
          error.message = '請求超時'
          break
        case 500:
          error.message = '伺服器內部錯誤'
          break
        case 501:
          error.message = '服務未實現'
          break
        case 502:
          error.message = '閘道器錯誤'
          break
        case 503:
          error.message = '服務不可用'
          break
        case 504:
          error.message = '閘道器超時'
          break
        case 505:
          error.message = 'HTTP版本不受支援'
          break
        default:
          break
      }
    }
    console.log(error.message)
    return Promise.reject(error)
  }
)

具體業務邏輯可以自己調整

匯出 axios

export default (url = '', data = {}, type = 'get') => {
  if (type.toLowerCase() === 'get') {
    return new Promise((resolve, reject) => {
      service
        .get(url, { params: data })
        .then(resp => {
          resolve(resp)
          // console.log(resp)
          // if (resp.data.ERRORCODE === 302) {
          //   window.location.href = resp.data.URL
          // } else {
          // resolve(resp.data)
          // }
        })
        .catch(e => {
          reject(e)
        })
    })
  }
  if (type.toLowerCase() === 'post' || type.toLowerCase() === 'put') {
    return new Promise((resolve, reject) => {
      service
        .post(url, data)
        .then(resp => {
          resolve(resp)
          // if (resp.data.ERRORCODE === 302) {
          //   window.location.href = resp.data.URL
          // } else {
          //   resolve(resp.data)
          // }
        })
        .catch(e => {
          reject(e)
        })
    })
  }
}

封裝 Api

import Axios from '@/utils/axios.js'

let Api = {}

// 獲取其他使用者基本資訊
Api.getUserInfo = (data = {}) => Axios('/api/account/getUserInfo', data, 'post')

引用 axios

import ApiAccount from '@api/account'

ApiAccount.getUserInfo({ accountID: accountID }).then(res => {
  if (res.accountID) {
    state.storage.setItem(accountID, JSON.stringify(res))
    resolve(res)
  } else {
    reject(res.RESULT)
  }
})

教程到此結束。
程式碼貴在分享，本人較菜，勿噴。

By: Laravel-China 寧澤林
MyBlog: nizer.in

相關文章