axios

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中, 也是vue官方推薦使用的http庫；封裝axios，一方面為了以后維護方便，另一方面也可以對請求進行自定義處理

安裝

npm i axios

封裝

我把axios請求封裝在http.js中，重新把get請求，post請求封裝了一次

首先，引入axios

import axios from 'axios'

設置接口請求前綴

一般我們開發都會有開發、測試、生產環境，前綴需要加以區分，我們利用node環境變量來作判斷，

if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'http://dev.xxx.com'} else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com'}

在localhost調試時，直接用開發地址一般都會有跨域的問題，所以我們還需要配置代理

本項目是vue cli3搭建的，代理配置是在vue.config.js文件中:

module.exports = { devServer: { proxy: { '/proxyApi': { target: 'http://dev.xxx.com', changeOrigin: true, pathRewrite: {  '/proxyApi': '' } } } }}

這樣就成功把/proxyApi 指向了 'http://dev.xxx.com'，重啟服務

修改一下http.js中的配置

if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = '/proxyApi'} else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com'}

攔截器

接著設置超時時間和請求頭信息

axios.defaults.timeout = 10000// 請求頭信息是為post請求設置axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

axios很好用，其中之一就是它的攔截器十分強大，我們就可以為請求和響應設置攔截器，比如請求攔截器可以在每個請求里加上token，做了統一處理后維護起來也方便，響應攔截器可以在接收到響應后先做一層操作，如根據狀態碼判斷登錄狀態、授權。

// 請求攔截器axios.interceptors.request.use( config => { // 每次發送請求之前判斷是否存在token // 如果存在，則統一在http請求的header都加上token，這樣后臺根據token判斷你的登錄情況，此處token一般是用戶完成登錄后儲存到localstorage里的 token && (config.headers.Authorization = token) return config }, error => { return Promise.error(error) })// 響應攔截器axios.interceptors.response.use(response => { // 如果返回的狀態碼為200，說明接口請求成功，可以正常拿到數據 // 否則的話拋出錯誤 if (response.status === 200) { return Promise.resolve(response) } else { return Promise.reject(response) }}, error => { // 我們可以在這里對異常狀態作統一處理 if (error.response.status) { // 對不同返回碼對相應處理 // 未登錄跳轉登錄頁面 // 未授權調取授權接口 // 請求不存在作提示用戶 return Promise.reject(error.response) }})