我是如何封裝axios的
摘要：
在vue中最常用的應該就是axios了，這是一個很強大的處理ajax的庫。今天我就分享一下我是如何封裝axios的。axios的基本api不再贅述，提前安裝一下也不用我說了吧
第一步：配置axios
首先，建立一個Service.js
，這裡面存放的時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
,這裡面放的是具體請求。
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
複製程式碼
歡迎指正與交流