我是如何封裝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 複製程式碼
歡迎指正與交流