關(guān)于Vue中axios的封裝實例詳解

axios.defaults.timeout = 10000

// http.js
import axios from 'axios'
// 創(chuàng)建 axios 實例
const service = axios.create({
 // 配置項
})

// 根據(jù) process.env.NODE_ENV 區(qū)分狀態(tài)，切換不同的 baseURL
const service = axios.create({
 baseURL: process.env.NODE_ENV === 'production' ? `/java` : '/apis',
})

const service = axios.create({
 ...
 headers: {
 get: {
  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  // 在開發(fā)中，一般還需要單點登錄或者其他功能的通用請求頭，可以一并配置進(jìn)來
 },
 post: {
  'Content-Type': 'application/json;charset=utf-8'
  // 在開發(fā)中，一般還需要單點登錄或者其他功能的通用請求頭，可以一并配置進(jìn)來
 }
 },
})

const service = axios.create({
 // 跨域請求時是否需要使用憑證
 withCredentials: true,
 // 請求 30s 超時
 timeout: 30000,
 validateStatus: function () {
  // 使用async-await，處理reject情況較為繁瑣，所以全部返回resolve，在業(yè)務(wù)代碼中處理異常
  return true
 },
})

const service = axios.create({
 // 在向服務(wù)器發(fā)送請求前，序列化請求數(shù)據(jù)
 transformRequest: [function (data) {
  data = JSON.stringify(data)
  return data
 }],
 // 在傳遞給 then/catch 前，修改響應(yīng)數(shù)據(jù)
 transformResponse: [function (data) {
  if (typeof data === 'string' && data.startsWith('{')) {
   data = JSON.parse(data)
  }
  return data
 }]
})

// 請求攔截器
service.interceptors.request.use((config) => {
 return config
}, (error) => {
 // 錯誤拋到業(yè)務(wù)代碼
 error.data = {}
 error.data.msg = '服務(wù)器異常，請聯(lián)系管理員！'
 return Promise.resolve(error)
})

// 根據(jù)不同的狀態(tài)碼，生成不同的提示信息
const showStatus = (status) => {
 let message = ''
 // 這一坨代碼可以使用策略模式進(jìn)行優(yōu)化
 switch (status) {
  case 400:
   message = '請求錯誤(400)'
   break
  case 401:
   message = '未授權(quán)，請重新登錄(401)'
   break
  case 403:
   message = '拒絕訪問(403)'
   break
  case 404:
   message = '請求出錯(404)'
   break
  case 408:
   message = '請求超時(408)'
   break
  case 500:
   message = '服務(wù)器錯誤(500)'
   break
  case 501:
   message = '服務(wù)未實現(xiàn)(501)'
   break
  case 502:
   message = '網(wǎng)絡(luò)錯誤(502)'
   break
  case 503:
   message = '服務(wù)不可用(503)'
   break
  case 504:
   message = '網(wǎng)絡(luò)超時(504)'
   break
  case 505:
   message = 'HTTP版本不受支持(505)'
   break
  default:
   message = `連接出錯(${status})!`
 }
 return `${message}，請檢查網(wǎng)絡(luò)或聯(lián)系管理員！`
}

// 響應(yīng)攔截器
service.interceptors.response.use((response) => {
 const status = response.status
 let msg = ''
 if (status < 200 || status >= 300) {
  // 處理http錯誤，拋到業(yè)務(wù)代碼
  msg = showStatus(status)
  if (typeof response.data === 'string') {
   response.data = { msg }
  } else {
   response.data.msg = msg
  }
 }
 return response
}, (error) => {
 // 錯誤拋到業(yè)務(wù)代碼
 error.data = {}
 error.data.msg = '請求超時或服務(wù)器異常，請檢查網(wǎng)絡(luò)或聯(lián)系管理員！'
 return Promise.resolve(error)
})

// http.ts
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'

const showStatus = (status: number) => {
 let message = ''
 switch (status) {
 case 400:
  message = '請求錯誤(400)'
  break
 case 401:
  message = '未授權(quán)，請重新登錄(401)'
  break
 case 403:
  message = '拒絕訪問(403)'
  break
 case 404:
  message = '請求出錯(404)'
  break
 case 408:
  message = '請求超時(408)'
  break
 case 500:
  message = '服務(wù)器錯誤(500)'
  break
 case 501:
  message = '服務(wù)未實現(xiàn)(501)'
  break
 case 502:
  message = '網(wǎng)絡(luò)錯誤(502)'
  break
 case 503:
  message = '服務(wù)不可用(503)'
  break
 case 504:
  message = '網(wǎng)絡(luò)超時(504)'
  break
 case 505:
  message = 'HTTP版本不受支持(505)'
  break
 default:
  message = `連接出錯(${status})!`
 }
 return `${message}，請檢查網(wǎng)絡(luò)或聯(lián)系管理員！`
}

const service = axios.create({
 // 聯(lián)調(diào)
 baseURL: process.env.NODE_ENV === 'production' ? `/` : '/apis',
 headers: {
 get: {
  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
 },
 post: {
  'Content-Type': 'application/json;charset=utf-8'
 }
 },
 // 是否跨站點訪問控制請求
 withCredentials: true,
 timeout: 30000,
 transformRequest: [(data) => {
 data = JSON.stringify(data)
 return data
 }],
 validateStatus () {
 // 使用async-await，處理reject情況較為繁瑣，所以全部返回resolve，在業(yè)務(wù)代碼中處理異常
 return true
 },
 transformResponse: [(data) => {
 if (typeof data === 'string' && data.startsWith('{')) {
  data = JSON.parse(data)
 }
 return data
 }]
})

// 請求攔截器
service.interceptors.request.use((config: AxiosRequestConfig) => {
 return config
}, (error) => {
 // 錯誤拋到業(yè)務(wù)代碼
 error.data = {}
 error.data.msg = '服務(wù)器異常，請聯(lián)系管理員！'
 return Promise.resolve(error)
})

// 響應(yīng)攔截器
service.interceptors.response.use((response: AxiosResponse) => {
 const status = response.status
 let msg = ''
 if (status < 200 || status >= 300) {
  // 處理http錯誤，拋到業(yè)務(wù)代碼
  msg = showStatus(status)
  if (typeof response.data === 'string') {
   response.data = {msg}
  } else {
   response.data.msg = msg
  }
 }
 return response
}, (error) => {
 // 錯誤拋到業(yè)務(wù)代碼
 error.data = {}
 error.data.msg = '請求超時或服務(wù)器異常，請檢查網(wǎng)絡(luò)或聯(lián)系管理員！'
 return Promise.resolve(error)
})

export default service