在vue中封裝axios，可在headers里面帶token

axios
首先要明白的是axios是什么：axios是基於promise（諾言）用於瀏覽器和node.js是http客戶端。

axios的作用是什么呢：axios主要是用於向后台發起請求的，還有在請求中做更多是可控功能。

特點：支持瀏覽器和node.js

支持promise

能攔截請求和響應

能轉換請求和響應數據

能取消請求

自動轉換JSON數據

瀏覽器支持防止CSRF（跨站請求偽造）

這里你一定會想promise是什么東西，以下是promise的個人理解：

promise是什么：是一個對象用來傳遞異步操作的信息，它代表了某個未來才會知道結果的事件（通常是一個異步操作），並且這個事件提供統一的api，可供進一步的處理。

promise的作用：Promise的出現主要是解決地獄回調的問題，比如你需要結果需要請求很多個接口，這些接口的參數需要另外那個的接口返回的數據作為依賴，這樣就需要我們一層嵌套一層，但是有了Promise 我們就無需嵌套。

現在封裝一個axios.js文件，這個axios在headers里面是沒有傳遞數據的，是一個相對而言比較簡單的封裝。
在這個axios.js中，我引入了element ui 的部分組件，目的是為了接口連接不上時，彈窗彈出相對應的信息。
代碼如下：

/* eslint-disable no-undef */

import axios from 'axios'
import { Message } from 'element-ui'

/*  統一請求路徑前綴,在npm run dev的時候,
    這個前綴要與vue.config.js里面的devServer的proxy相對應
*/

//  const base = '/ccma-server/api'   // 服務器地址
//  const base = '/api'    //本地

// 超時設定
axios.defaults.timeout = 15000

/* 添加請求攔截器 */
axios.interceptors.request.use(config => {
  /* 發送請求之前做些什么 */
  // console.log(config)
  return config
}, err => {
  Message.error('請求超時')
  return Promise.reject(err) //.catch的時候可以捕捉到錯誤
})

/* 添加響應攔截器 */
axios.interceptors.response.use(response => {
  /* 對數據做些什么 */
  const data = response.data

  // 根據返回的code值來做不同的處理(和后端約定)
  switch (data.code) {
    case 401:
      break
    case 404:
      // 沒有權限
      if (data.msg !== null) {
        Message.error(data.msg)
      } else {
        Message.error('未知錯誤')
      }
      break
    case 403:
      // 沒有權限
      if (data.msg !== null) {
        Message.error(data.msg)
      } else {
        Message.error('未知錯誤')
      }
      break
    case 500:
      // 錯誤
      if (data.msg !== null) {
        Message.error(data.msg)
      } else {
        Message.error('未知錯誤')
      }
      break
    default:
      return data
  }

  return data
}, (err) => {
  /* 對響應錯誤做些什么 */
  // 返回狀態碼不為200時候的錯誤處理
  Message.error(err.toString())
  return Promise.reject(err)  //.catch的時候可以捕捉到錯誤
})

export const getRequest = (url, params) => {
  return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params,
    headers: {
      // accessToken:
    }
  })
}

export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'application/json'
      // accessToken:
    }
  })
}

export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params,
    transformRequest: [
      function (data) {
        let ret = ''
        for (const it in data) {
          ret +=
            encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }
    ],
    headers: {
      'Content-Type': 'application/json'
      // accessToken:
    }
  })
}

export const deleteRequest = (url, params) => {
  return axios({
    method: 'delete',
    url: `${base}${url}`,
    params: params,
    headers: {
      // accessToken:
    }
  })
}

export const importRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      // accessToken:
    }
  })
}

export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    params: params,
    headers: {
      // accessToken:
    }
  })
}

代碼里面的注釋我覺得已經很詳細了，如果還有不明白的地方可以留言討論。

第二種封裝（在headers里面帶token的）
一般來說，編寫后台管理系統的話，一般會涉及到權限管理，調接口的話，會在headers里面傳遞一個唯一的token來判斷用戶的權限，如果要在每一個接口都傳一個token的話，這樣會非常的麻煩和繁瑣。所以我就在axios里面直接封裝好了，這里的token我是用的localStorage來傳遞的，你也可以根據業務來傳遞（cookie或者session）個人建議可以根據你的實際業務進行更改。代碼如下：

import axios from 'axios'
import { getStore, setStore } from './storage'
import { router } from '../router/index'
import { Message } from 'element-ui'
import Cookies from 'js-cookie'
// 統一請求路徑前綴
// const base = '/ccma-server/api'   // 服務器地址/
const base = '/api'   // 本地///
// 超時設定
axios.defaults.timeout = 15000

axios.interceptors.request.use(config => {
  return config
}, err => {
  Message.error('請求超時')
  return Promise.reject(err)
})

// http response 攔截器
axios.interceptors.response.use(response => {
  const data = response.data

  // 根據返回的code值來做不同的處理(和后端約定)
  switch (data.code) {
    case 401:
      // 未登錄 清除已登錄狀態
      Cookies.set('userInfo', '')
      setStore('accessToken', '')
      if (router.history.current.name !== 'login') {
        if (data.msg !== null) {
          Message.error(data.msg)
        } else {
          Message.error('未知錯誤，請重新登錄')
        }
        router.push('/login')
      }
      break
    case 403:
      // 沒有權限
      if (data.msg !== null) {
        Message.error(data.msg)
      } else {
        Message.error('未知錯誤')
      }
      break
    case 500:
      // 錯誤
      if (data.msg !== null) {
        Message.error(data.msg)
      } else {
        Message.error('未知錯誤')
      }
      break
    default:
      return data
  }

  return data
}, (err) => {
  // 返回狀態碼不為200時候的錯誤處理
  Message.error(err.toString())
  return Promise.resolve(err)
})

export const getRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params,
    headers: {
      'accessToken': accessToken
    }
  })
}

export const postRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'application/json',
      'accessToken': accessToken
    }
  })
}

export const putRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (const it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/json',
      'accessToken': accessToken
    }
  })
}

export const deleteRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'delete',
    url: `${base}${url}`,
    params: params,
    headers: {
      'accessToken': accessToken
    }
  })
}

export const importRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'accessToken': accessToken
    }
  })
}

export const uploadFileRequest = (url, params) => {
  const accessToken = getStore('accessToken')
  return axios({
    method: 'post',
    url: `${base}${url}`,
    params: params,
    headers: {
      'accessToken': accessToken
    }
  })
}

封裝完成之后要怎么使用呢，本人是這樣子操作的，首先創建一個js放需要調的接口，這里建議按模塊的划分，方便管理，具體代碼例子如下：

import { getRequest, postRequest } from '@/libs/axios'

export const getAllDrugInfo = (params) => {
  return postRequest('/clinicalMedFirst/getAllDrugInfo', params)
}

然后在你需要的地方引入一下，比如說我剛剛創建的那個js文件叫lcyy.js

import { getAllDrugInfo } from '@/api/lcyy'
//在methods里面
   getAllDrugInfo () {
      getAllDrugInfo({
        drugName: ''  // 需要傳遞的參數
      }).then(res => {
        if (res.code === 200) {
            //處理你要的數據
            console.log(res.data)
          })
        }
      })
    }

好了，這樣的就可以使用了