axios 安裝
$ npm install axios --save
在項目目錄創(chuàng)建 lib 目錄
創(chuàng)建 http.js 來設置axios
import axios from 'axios'
import router from '@/router'
const DEV_BASE_URL = 'http://localhost:8000/api'
const PRO_BASE_URL = '/api'
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? PRO_BASE_URL : DEV_BASE_URL
axios.defaults.baseURL = '/api'
axios.defaults.timeout = 5000
// http request 攔截器
axios.interceptors.request.use(
config => {
// 判斷是否存在token成翩，如果存在的話忱反，則每個http header都加上token
let token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `token ${token}`
} else {
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
return config
},
err => {
return Promise.reject(err)
})
// http response 攔截器
axios.interceptors.response.use(
response => {
return response
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳轉到登錄頁面
// store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
// 返回接口返回的錯誤信息
return Promise.reject(error.response.data)
})
export default axios
我們來解釋一下這段代碼的意思
axios.defaults.baseURL 基礎url，我們可以根據(jù)生產(chǎn)環(huán)境和開發(fā)環(huán)境來指定訪問不同的URL闯两，我們的應用最終會部署在同一域名下，這里我去掉了這個邏輯氮兵，統(tǒng)一采用 /api前綴荠耽。
axios.defaults.timeout 設置了請求超時時間5秒
下面是重點眶根，分別設置請求(requet)和響應(response)的攔截器腥放，增加一些全局設置泛啸。
我們在同一域名下部署應用，用cookie session的認證方式也可以控制訪問秃症，但通常為了考慮兼容app或小程序或者其它客戶端的數(shù)據(jù)訪問候址，我們采用token認證的方式，在用戶登陸完成驗證后會返回一個token用于后邊的會話种柑，再之后的請求就要加上這個token岗仑，我們把token放在http request的header里。
request的邏輯聚请，從localStorage取token荠雕，如果有就加到header里，如果沒有就跳轉到登陸頁
response的邏輯驶赏，返回正常的結果直接return出去舞虱，出錯的情況，如果是401母市，則清理本地存儲并跳轉登陸頁。
配置api代理
api代理可以方便的解決跨域問題损趋，與服務端通訊患久，比如下面的配置， 我們的項目開發(fā)環(huán)境默認監(jiān)聽的是8080端口浑槽，在訪問數(shù)據(jù)時蒋失，將8080端口的url訪問重定向到另一個8000端口的服務，傳遞路徑和參數(shù)桐玻，并返回結果篙挽。
修改config/index.js 配置 proxyTable
proxyTable: {
'/api': {
target: 'http://localhost:8000/'
}
},
將對項目 /api 路徑下的訪問代理到 8000 端口的服務上, 再后邊的章節(jié)里會有具體的操作，暫時先配置上镊靴。
rpc和restful api的選擇
插一段RPC和restful api選擇铣卡，具體的理念對比網(wǎng)上去科普吧，
我的習慣是如果是標準的數(shù)據(jù)對象操作--增刪改查就用restful api偏竟，其它的rpc
不要為了接口而接口煮落，技術永遠是解決效率和效益的問題，實際點用最適合的踊谋。
