從0到1使用VUE-CLI3開發(fā)實戰(zhàn)(四): Axios封裝
有很多同學看了本系列的前幾篇之后建議我暫時先不用TS,于是小肆之后將把TS換成JS繼續(xù)下面的文章。
今天給大家?guī)眄椖恐蟹浅V匾囊画h(huán),配置Axios,一起來看看吧。
axios 簡介
首先要明白的是axios是什么:axios是基于promise(諾言)用于瀏覽器和node.js是http客戶端。
axios的作用是什么呢:axios主要是用于向后臺發(fā)起請求的,還有在請求中做更多是可控功能。
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 發(fā)出 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求和響應數(shù)據(jù)
- 取消請求
- 自動轉換JSON數(shù)據(jù)
- 客戶端支持防止 CSRF/XSRF
項目配置
首先當然還是要安裝啦:
npm install axios
之后我們新建一個api文件夾用來放接口和axios的配置。
先給大家看看我配置好之后的文件夾目錄結構:
可以說這次配置是我劃分的比較詳細的配置方法了,具體每個文件都分別做什么用,我們現(xiàn)在來看看吧。
axios.js
這個文件主要創(chuàng)建axios實例并對攔截器進行配置,不理解攔截器的同學可以看看下圖:
import axios from 'axios'
// 創(chuàng)建 axios 實例
let service = axios.create({
// headers: {'Content-Type': 'application/json'},
timeout: 60000
})
// 設置 post、put 默認 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/json'
service.defaults.headers.put['Content-Type'] = 'application/json'
// 添加請求攔截器
service.interceptors.request.use(
(config) => {
if (config.method === 'post' || config.method === 'put') {
// post、put 提交時,將對象轉換為string, 為處理Java后臺解析問題
config.data = JSON.stringify(config.data)
}
// 請求發(fā)送前進行處理
return config
},
(error) => {
// 請求錯誤處理
return Promise.reject(error)
}
)
// 添加響應攔截器
service.interceptors.response.use(
(response) => {
let { data } = response
return data
},
(error) => {
let info = {},
{ status, statusText, data } = error.response
if (!error.response) {
info = {
code: 5000,
msg: 'Network Error'
}
} else {
// 此處整理錯誤信息格式
info = {
code: status,
data: data,
msg: statusText
}
}
}
)
/**
* 創(chuàng)建統(tǒng)一封裝過的 axios 實例
* @return {AxiosInstance}
*/
export default function() {
return service
}
index.js
index.js文件主要封裝我們幾個常用的方法,get、post、put、delete
import axios from './axios'
let instance = axios()
export default {
get(url, params, headers) {
let options = {}
if (params) {
options.params = params
}
if (headers) {
options.headers = headers
}
return instance.get(url, options)
},
post(url, params, headers, data) {
let options = {}
if (params) {
options.params = params
}
if (headers) {
options.headers = headers
}
return instance.post(url, data, options)
},
put(url, params, headers) {
let options = {}
if (headers) {
options.headers = headers
}
return instance.put(url, params, options)
},
delete(url, params, headers) {
let options = {}
if (params) {
options.params = params
}
if (headers) {
options.headers = headers
}
return instance.delete(url, options)
}
}
install.js
install.js文件可以把我們所有的api接口安裝到全局,之后我們在main.js文件中導入就可以了。
import apiList from './apiList'
const install = function(Vue) {
if (install.installed) {
return
install.installed = true
Object.defineProperties(Vue.prototype, {
$api: {
get() {
return apiList
}
}
})
}
export default {
install
}
main.js中添加:
import api from './api/install'
Vue.use(api)
apiList.js
把我們所有的api文件夾導入到這一個文件中來。
import matches from './matches'
import user from './user'
export default {
matches,
user
}
baseUrl.js
根據(jù)不同的環(huán)境設定不同的baseUrl,在配置這個文件前,我們先需要做如下幾件事:
1.根目錄新建.env.dev
文件并在文件內寫入NODE_ENV = 'dev'
2.在package.json
文件內添加:
"build:dev": "vue-cli-service build --mode dev",
"build:pre": "vue-cli-service build --mode pre",
以下是baseUrl.js的代碼:
let baseUrl = '/api' // 本地代理
switch (process.env.NODE_ENV) {
case 'dev':
baseUrl = 'http://testserver.feleti.cn/' // 測試環(huán)境url
break
case 'pre':
baseUrl = 'https://pre-server.feleti.cn' // 預上線環(huán)境url
break
case 'production':
baseUrl = 'https://api.feleti.cn' // 生產(chǎn)環(huán)境url
break
}
export default baseUrl
matches、user
這兩個文件夾都是根據(jù)api類型進行區(qū)分的,在項目以后也建議大家根據(jù)api類型劃分出不同的文件存放,在小項目中這樣做可能顯得很麻煩,但如果項目比較大,這樣做的優(yōu)勢就體現(xiàn)出來了。
我們就只看看matches文件夾下的內容:
urls.js
把一個類型下的所有url接口放入這一個文件,我只放了一個暫時,可以繼續(xù)添加。
import baseUrl from '../baseUrl'
export default {
matches: baseUrl + '/matches'
}
index.js
有些接口需要在header中添加token或是其他,可以按如下配置。
import api from '../index'
import urls from './urls'
const header = {}
export default {
matches(params) {
// return出去了一個promise
return api.get(urls.matches, params, header)
}
}
配置完上述全部文件就算是大功告成了,下面我們看看如何使用吧。
組件中調用
created() {
this.matches()
},
methods: {
async matches() {
// 這里用try catch包裹,請求失敗的時候就執(zhí)行catch里的
try {
//定義參數(shù)對象
let params = {
type: 'zc'
}
let res = await this.$api.matches.matches(params)
console.log('?getMatches -> res', res)
} catch (e) {
console.log('?catch -> e', e)
}
}
}
之后我們就可以在控制臺看到我們調用成功的輸出日志啦:
小結
在實際工作中,我們盡量要把項目做的細致一些,尤其是項目開始之前的配置,今天所涉及到的很多文件在之后的配置中還會有進步的更改,比如配置用戶相關的接口、配置全局loading等,大家只要能把今天的內容完全理解,之后再配置這里就很容易啦。
前置閱讀:
- 用vue-cli3從0到1做一個完整功能手機站(一)
- 從0到1開發(fā)實戰(zhàn)手機站(二):Git提交規(guī)范配置
- 從0到1使用VUE-CLI3開發(fā)實戰(zhàn)(三): ES6知識儲備