axios在vue.js中的應用

摘要： 介紹 Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。也是 vue.js 作者推薦的庫 實現功能 從瀏覽器中建立 XMLHttpRequests 從 node.js 建立 http 請求 支援 Pro...

介紹

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。也是 vue.js 作者推薦的庫

實現功能

• 從瀏覽器中建立 XMLHttpRequests
• 從 node.js 建立 http 請求
• 支援 Promise API
• 攔截請求和響應
• 轉換請求資料和響應資料
• 取消請求
• 自動轉換 JSON 資料
• 客戶端支援防禦 XSRF

瀏覽器支援

專案中需要配置完成的功能

建立 axios 例項，統一配置實現如下功能

• axios 本身的配置
  • 配置URL字首
  • 超時時間
  • 跨域cookie
  • ...
• HTTPRequest攔截器
  • 呼叫載入資訊
  • 請求頭中加入身份驗證 Token
  • 針對 IE 瀏覽器 GET 請求快取的處理
  • ... 其它業務程式碼
• HTTPResponse攔截器
  • 隱藏載入資訊
  • 針對返回值統一處理
  • ....其它業務程式碼

具體封裝程式碼如下：

其中部分業務程式碼已經被摘除，實現思路僅供參考

import axios from 'axios'
import store from '@/store'
import { Loading, Message, MessageBox } from 'element-ui'

// 載入頂部進度條
import NProgress from 'nprogress'
NProgress.configure({ showSpinner: false })

// 關閉nprogress和loading
function closeLoading () {
NProgress.done()
loadingService.close()
}

// 跨域請求，允許儲存cookie
axios.defaults.withCredentials = true

// 建立axios例項、配置baseURL、超時時間
const service = axios.create({
baseURL: process.env.VUE_APP_API_BASEURL, // 從環境程序中根據執行環境獲取的api的base_url
timeout: 50000 // 請求超時時間
})

let loadingService
/**
* request攔截器
* 傳送請求前請求頭中設定cookie
*/
service.interceptors.request.use(config => {
NProgress.start()
loadingService = Loading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.1)'
})

let token = store.getters.token
if (token && token.access_token && Date.now() < token.expires_in) {
// 讓每個請求攜帶身份驗證資訊
if (!config.headers['Authorization']) {
config.headers['Authorization'] = `Bearer ${token.access_token}`
}
}

// 判斷如果是get請求增加隨機數，防止IE瀏覽器快取api請求
if (config.method === 'get') {
if (config.params && Object.keys(config.params).length > 0) {
config.params['cache'] = new Date().getTime()
} else {
config = Object.assign({}, config, { params: { cache: new Date().getTime() } })
}
}
return config
}, error => {
console.error(error) 
Promise.reject(error)
})

/**
* respone攔截器
* 通過response自定義code來標示請求狀態，處理相應問題
*/
service.interceptors.response.use(
response => {
closeLoading()
const { status }= response.data

// 狀態碼：-1：未登入 /1：請求成功 /-2：請求失敗 /-3：無許可權 /-4：系統錯誤
if (status === 1) {
return response.data.data
} else {
let errorMessage = response.data.message
switch (
case -1:
// 清除本地儲存的Token
// 跳轉到登入頁面
break
case -2:
// 提示錯誤資訊
break
default:
// 提示錯誤資訊
}
return Promise.reject(new Error(errorMessage))
}
},
// 服務端錯誤
error => {
console.
console.error('err' + error) // for debug
return Promise.reject(error)
}
)

export default service

呼叫過程

注意：在例項呼叫中傳入的配置會覆蓋上一步在建構函式 axios 上的配置

import request from '@/XXX/request.js'

/* 使用者登入 */
export function loginByUsername (reqParams) {
return request({
// baseURL: '/api', 
// headers: { },
url: '/auth/oauth/token',
method: 'post',
params: reqParams
})
}

有其他問題或更好思路，歡迎私信一起討論。

參考文件