axios是一個(gè)promise實(shí)現(xiàn)的http庫(kù)，符合最新的ES規(guī)范。我們?yōu)樯兑眠@個(gè)東西呢，主要有以下幾個(gè)原因：
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請(qǐng)求
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
- 支持 Promise API（可以配合ES7的async await使用，解決回調(diào)地獄）
- 客戶端支持防止CSRF
- 提供了一些并發(fā)請(qǐng)求的接口
- 輕量，體積小
搞起
要想把a(bǔ)xios裝項(xiàng)目，攏共分3部：
- IE兼容性處理
- 封裝、配置axios
- 把他掛到vue的prototype上（這樣就不用每個(gè)文件都引入了）
IE兼容處理
axios是promise實(shí)現(xiàn)的，提到promise，首先應(yīng)該想到IE不支持，所以應(yīng)該先加個(gè)墊片，給IE做下兼容性處理
npm install --save babel-polyfill
然后再main.js中引入
import 'babel-polyfill'
封裝axios
先安裝axios
npm install --save axios
然后建議在src下新建一個(gè)文件夾api專門用來存放接口相關(guān)的文件和配置，貼一下我的目錄結(jié)構(gòu)
src
├── ...
├── main.js
├── App.vue
├── api
├── unsplash
├── index.js
└── urls.js
├── apiList.js
├── axios.js
├── index.js
└── install.js
└── common #工具文件夾
├── utils.js
└── browser.js
下面是請(qǐng)求和響應(yīng)攔截等相關(guān)配置
需要的同學(xué)點(diǎn)這個(gè)看代碼browser.js
src/api/axios.js
import axios from 'axios'
import browser from '../common/browser'
// 創(chuàng)建 axios 實(shí)例
let http = axios.create({
// headers: {'Content-Type': 'application/json'},
timeout: 60000
})
// 設(shè)置 post、put 默認(rèn) Content-Type
http.defaults.headers.post['Content-Type'] = 'application/json'
http.defaults.headers.put['Content-Type'] = 'application/json'
// 添加請(qǐng)求攔截器
http.interceptors.request.use(config => {
if (config.method === 'post' || config.method === 'put') {
// post、put 提交時(shí)，將對(duì)象轉(zhuǎn)換為string, 為處理Java后臺(tái)解析問題
config.data = JSON.stringify(config.data)
} else if (config.method === 'get' && browser.isIE) {
// 給GET 請(qǐng)求后追加時(shí)間戳， 解決IE GET 請(qǐng)求緩存問題
let symbol = config.url.indexOf('?') >= 0 ? '&' : '?'
config.url += symbol + '_=' + Date.now()
}
// 請(qǐng)求發(fā)送前進(jìn)行處理
return config
}, error => {
// 請(qǐng)求錯(cuò)誤處理
return Promise.reject(error)
})
// 添加響應(yīng)攔截器
http.interceptors.response.use(response => {
let {data} = response
return data
}, error => {
let info = {}
let {status, statusText, data} = error.response
if (!error.response) {
info = {
code: 5000,
msg: 'Network Error'
}
} else {
// 此處整理錯(cuò)誤信息格式
info = {
code: status,
data: data,
msg: statusText
}
}
return Promise.reject(info)
})
/**
* 創(chuàng)建統(tǒng)一封裝過的 axios 實(shí)例
* @return {AxiosInstance}
*/
export default function () {
return http
}
如果需要前端做登陸校驗(yàn)的，可以在上面的請(qǐng)求攔截器中添加相關(guān)邏輯
其他配置項(xiàng)還有很多，具體可以查看axios中文說明
封裝常用請(qǐng)求方法
src/api/index.js
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) {
let options = {}
if (headers) {
options.headers = headers
}
return instance.post(url, params, 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)
}
}
到此axios就封裝好了
接下來我們把接口的URL和調(diào)用方法也寫在這個(gè)文件夾里，建議按模塊劃分文件夾。下面用圖片網(wǎng)站unsplash的api舉例說明，此處肯定要涉及到跨域問題，如果對(duì)跨域問題不了解，推薦一篇文章，講的很棒。
unsplash的做法是CORS，全稱是"跨域資源共享"（Cross-origin resource sharing）跨域資源共享 CORS 詳解，前端啥也不用做，正常發(fā)請(qǐng)求就ok了
src/api/unsplash/url.js（這個(gè)文件存放所有模塊相關(guān)URL地址）
const baseUrl = 'https://api.unsplash.com'
export default {
// 圖片列表
photos: baseUrl + '/photos'
}
src/api/unsplash/index.js
import api from '../index'
import urls from './urls'
// import { formatUrl } from '../../common/utils'
// 這個(gè)東西是unsplash要求加在header里的驗(yàn)證，有興趣的同學(xué)可以去看他的api，此處不再贅述
const header = {
'Authorization': 'Client-ID xxxxxxx'
}
export default {
viewPhotos (params) {
// return出去了一個(gè)promise
return api.get(urls.photos, params, header)
}
}
這些都做完之后，把所有模塊的調(diào)用都整合到一個(gè)文件里，（這里拆這么細(xì)，項(xiàng)目比較大，模塊比較多的時(shí)候就會(huì)體現(xiàn)出好處，方便統(tǒng)一管理）
src/api/apiList.js
// 有多少import多少
import unsplash from './unsplash'
export default {
unsplash
}
掛到Vue的prototype
該配的該寫的都整完了，最后一步把大象裝冰箱。。啊不，是把他掛prototype上
src/api/install.js
// 導(dǎo)入模塊
import apiList from './apiList'
const install = function (Vue) {
if (install.installed) return
install.installed = true
Object.defineProperties(Vue.prototype, {
$api: {
get () {
return apiList
},
enumerable: false, // 不可枚舉
configurable: false // 不可重寫
}
})
}
export default {
install
}
最后把這個(gè)install.js在main.js里引一下，再use一下就ok了
import 'babel-polyfill'
import Vue from 'vue'
import api from './api/install'
import App from './App'
import router from './router'
import store from './store'
Vue.use(api)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
接下來我們就可以愉快地使用了
隨便找個(gè)頁(yè)面
<template>
<div class="waterfall">
</div>
</template>
<script>
export default {
name: 'waterfall',
data () {
return {
photosList: []
}
},
created () {
this.getPhotos()
},
mounted () {
},
computed: {
},
watch: {
},
methods: {
// async await 是ES7新特性，本質(zhì)上是generator函數(shù)的語法糖
async getPhotos () {
// 這里用try catch包裹，請(qǐng)求失敗的時(shí)候就執(zhí)行catch里的
try {
let params = {
page: 1,
per_page: 1,
order_by: 'latest'
}
let res = await this.$api.unsplash.viewPhotos(params)
this.photosList = res
console.log(res)
} catch (e) {
console.log(e)
}
}
}
}
</script>
<style lang="less">
</style>
如果報(bào)了async await的錯(cuò)，就還得配一下根目錄的.babelrc，先安裝
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-stage-0
.babelrc
{
"presets": [
["env", { "modules": false }],
"stage-0"
],
"plugins": [[
"transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}
]]
}
總結(jié)
以上就是把a(bǔ)xios整合進(jìn)項(xiàng)目的全部步驟，一般項(xiàng)目配置這些就夠用了，要想玩兒的更6，還是得擼文檔啊。。
