vue中axios的二次封裝實例講解

更新時間：2019年10月14日 15:46:35 作者：CodeBug

在本篇文章里小編給大家整理了關于vue中axios的二次封裝實例以及相關知識點總結，需要的朋友們可以學習下。

我們做項目時，雖然axios也可以直接拿來用，但是對接口比較零散，不太好進行維護，也會產(chǎn)生大量的重復代碼，所以我在這對axios進行了統(tǒng)一接口處理

第一步，先在src中的公共文件夾中如utils里新建request.js文件

import axios from 'axios'
import router from '@/router/routers'
import { Notification, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
import Config from '@/config'
 
import {baseUrl} from '@/utils/env'
 
// 創(chuàng)建axios實例
const service = axios.create({
 baseURL: baseUrl, // api 的 base_url
 // baseURL: process.env.BASE_API, // api 的 base_url
 timeout: Config.timeout // 請求超時時間
})
 
// request攔截器
service.interceptors.request.use(
 config => {
  if (getToken()) {
   config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
  }
  config.headers['Content-Type'] = 'application/json'
  return config
 },
 error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
 }
)
 
// response 攔截器
service.interceptors.response.use(
 response => {
  const code = response.status
  console.log(response)
  if (code < 200 || code > 300) {
   Notification.error({
    title: response.message
   })
   return Promise.reject('error')
  } else {
   return response.data
  }
 },
 error => {
  let code = 0
  try {
   code = error.response.data.status
  } catch (e) {
   if (error.toString().indexOf('Error: timeout') !== -1) {
    Notification.error({
     title: '網(wǎng)絡請求超時',
     duration: 2500
    })
    return Promise.reject(error)
   }
   if (error.toString().indexOf('Error: Network Error') !== -1) {
    Notification.error({
     title: '網(wǎng)絡請求錯誤',
     duration: 2500
    })
    return Promise.reject(error)
   }
  }
  if (code === 401) {
   MessageBox.confirm(
    '登錄狀態(tài)已過期，您可以繼續(xù)留在該頁面，或者重新登錄',
    '系統(tǒng)提示',
    {
     confirmButtonText: '重新登錄',
     cancelButtonText: '取消',
     type: 'warning'
    }
   ).then(() => {
    store.dispatch('LogOut').then(() => {
     location.reload() // 為了重新實例化vue-router對象 避免bug
    })
   })
  } else if (code === 403) {
   router.push({ path: '/401' })
  } else {
   const errorMsg = error.response.data.message
   if (errorMsg !== undefined) {
    Notification.error({
     title: errorMsg,
     duration: 2500
    })
   }
  }
  return Promise.reject(error)
 }
)
export default service

代碼解讀：