Vue+Element二次封裝axios為插件使用

NO IMAGE

記錄一下工作中第一次簡單封裝axios,先獻上axios的GitHub地址

它是基於promise的http庫,可運行在瀏覽器端和node.js中。他有很多優秀的特性,例如攔截請求和響應、取消請求、轉換json、客戶端防禦cSRF等。尤大大也推薦我們使用axios庫,

基本封裝要求

  • 由於Element的Loading是全局等待條,每次請求都需要顯示,為了減少操作就做了一下簡單的封裝
  • 根據情況,在請求參數中添加showLoading=true,自行顯示全局等待條。
  • 統一 url 配置
  • 統一api 請求
  • request (請求)攔截器,例如:帶上token等,設置請求頭
  • response (響應)攔截器,例如:統一錯誤處理,頁面重定向等
  • 將 axios 封裝成 Vue 插件使用

安裝

   cnpm install axios;    //使用淘寶鏡像安裝axios

引入

一般我會在項目的src目錄中,新建一個api.js文件

第一步:配置axios

import Axios from 'axios'           //在http.js引入axios
import qs from 'qs'          //引入qs模塊,用來序列化post類型的數據
import { Message, Loading } from 'element-ui';
const ConfigBaseURL = 'https://localhost:8080/'     //默認路徑,這裡也可以使用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: '加載中...'
})
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,這裡放的是具體請求(可以按模塊放)

    //導入api.js
import service from './api'
import qs from 'qs'
export function getOffersList(productId) {
return Service({
url: '/manager/getOffersList',
params: {List: List }
})
}
export function getOffersid() {
return Service({
url: '/manager/getOffersid ',
method: 'get'
})
}
export function getOffersparticulars(data) {
return Service({
url: '/manager/getOffersparticulars',
method: 'post',
data: JSON.stringify(data)
})
}

第三步在vue組件中使用

    import {getOffersList,getOffersid,getOffersparticulars} from '@/api/request.js'
getOffersList(data).then(res=>{
console.log(res)
})

全局使用 在main.js中

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

總結

  • 第一次封裝可能不夠嚴謹
  • 封裝回調有點多,在使用的時候也需要加上 then()來處理結果,async & await 瞭解一下喲,好東西當然要藏起來,我才不會告訴你們下次我想分享出來…
  • 第一次寫文章如有錯誤請告知

PS:IE9 不支持 Promise ,需要安裝一個 polyfill

import 'babel-polyfill'

相關文章

iOS底層探索類

[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)

JavaScript優雅寫法及騷操作記錄

Vue實現剪貼板複製功能