我是如何封裝axios的

前言

在vue中最經常使用的應該就是axios了，這是一個很強大的處理ajax的庫。今天我就分享一下我是如何封裝axios的。axios的基本api再也不贅述，提早安裝一下也不用我說了吧

第一步：配置axios

• 首先，建立一個Service.js，這裏面存放的時axios的配置以及攔截器等，最後導出一個axios對象。我日常elementUI用的比較多，這裏你也能夠使用本身的UI庫。

import axios from 'axios'
import { Message, Loading } from 'element-ui'
const ConfigBaseURL = 'https://localhost:3000/' //默認路徑，這裏也能夠使用env來判斷環境
let loadingInstance = null //這裏是loading
//使用create方法建立axios實例
export const Service = axios.create({
  timeout: 7000, // 請求超時時間
  baseURL: ConfigBaseURL,
  method: 'post',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
// 添加請求攔截器
Service.interceptors.request.use(config => {
  loadingInstance = Loading.service({
    lock: true,
    text: 'loading...'
  })
  return config
})
// 添加響應攔截器
Service.interceptors.response.use(response => {
  loadingInstance.close()
  // console.log(response)
  return response.data
}, error => {
  console.log('TCL: error', error)
  const msg = error.Message !== undefined ? error.Message : ''
  Message({
    message: '網絡錯誤' + msg,
    type: 'error',
    duration: 3 * 1000
  })
  loadingInstance.close()
  return Promise.reject(error)
})
複製代碼

具體的攔截器邏輯以具體業務爲準，我這裏沒什麼邏輯，只是加了一個全局的loading而已

第二步：封裝請求

這裏我再建立一個request.js,這裏面放的是具體請求。

import {Service} from './Service'
export function getConfigsByProductId(productId) {
  return Service({
    url: '/manager/getConfigsByProductId',
    params: { productId: productId }
  })
}
export function getAllAndroidPlugins() {
  return Service({
    url: '/manager/getAndroidPlugin ',
    method: 'get'
  })
}
export function addNewAndroidPlugin(data) {
  return Service({
    url: '/manager/addAndroidPlguin',
    data: JSON.stringify(data)
  })
}
複製代碼

固然你也能夠url再封裝一遍，放到另外一個文件裏，我以爲這樣並沒有什麼意義，反而增長複雜度。這裏主要注意的是起名問題，建議按功能起名，例如我這裏請求方式+功能或者內容+參數,這樣子直接看getConfigsByProductId這個名字也是很清晰明瞭

第三步：使用

在vue組件中

import {getAllAndroidPlugins,getConfigsByProductId,addNewAndroidPlugin} from '@/api/request.js'

getAllAndroidPlugins()
.then(res=>{

})
複製代碼

全局使用 在main.js中

import {Service} from '@/api/Service.js'
Vue.prototype.$axios=Service

複製代碼

---

歡迎指正與交流