axios是一個promise實現(xiàn)的http庫匈子，符合最新的ES規(guī)范蛀恩。我們?yōu)樯兑眠@個東西呢让歼，主要有以下幾個原因：
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請求
- 攔截請求和響應
- 轉換請求數(shù)據(jù)和響應數(shù)據(jù)
- 支持 Promise API（可以配合ES7的async await使用，解決回調地獄）
- 客戶端支持防止CSRF
- 提供了一些并發(fā)請求的接口
- 輕量箕般，體積小
搞起
要想把axios裝項目甸昏，攏共分3部：
- IE兼容性處理
- 封裝顽分、配置axios
- 把他掛到vue的prototype上（這樣就不用每個文件都引入了）
IE兼容處理
axios是promise實現(xiàn)的，提到promise施蜜，首先應該想到IE不支持卒蘸，所以應該先加個墊片，給IE做下兼容性處理
npm install --save babel-polyfill
然后再main.js中引入
import 'babel-polyfill'
封裝axios
先安裝axios
npm install --save axios
然后建議在src下新建一個文件夾api專門用來存放接口相關的文件和配置翻默，貼一下我的目錄結構
src
├── ...
├── main.js
├── App.vue
├── api
├── unsplash
├── index.js
└── urls.js
├── apiList.js
├── axios.js
├── index.js
└── install.js
└── common #工具文件夾
├── utils.js
└── browser.js
下面是請求和響應攔截等相關配置
需要的同學點這個看代碼browser.js
src/api/axios.js
import axios from 'axios'
import browser from '../common/browser'
// 創(chuàng)建 axios 實例
let http = axios.create({
// headers: {'Content-Type': 'application/json'},
timeout: 60000
})
// 設置 post缸沃、put 默認 Content-Type
http.defaults.headers.post['Content-Type'] = 'application/json'
http.defaults.headers.put['Content-Type'] = 'application/json'
// 添加請求攔截器
http.interceptors.request.use(config => {
if (config.method === 'post' || config.method === 'put') {
// post、put 提交時修械，將對象轉換為string, 為處理Java后臺解析問題
config.data = JSON.stringify(config.data)
} else if (config.method === 'get' && browser.isIE) {
// 給GET 請求后追加時間戳案糙， 解決IE GET 請求緩存問題
let symbol = config.url.indexOf('?') >= 0 ? '&' : '?'
config.url += symbol + '_=' + Date.now()
}
// 請求發(fā)送前進行處理
return config
}, error => {
// 請求錯誤處理
return Promise.reject(error)
})
// 添加響應攔截器
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 {
// 此處整理錯誤信息格式
info = {
code: status,
data: data,
msg: statusText
}
}
return Promise.reject(info)
})
/**
* 創(chuàng)建統(tǒng)一封裝過的 axios 實例
* @return {AxiosInstance}
*/
export default function () {
return http
}
如果需要前端做登陸校驗的签则，可以在上面的請求攔截器中添加相關邏輯
其他配置項還有很多遣臼，具體可以查看axios中文說明
封裝常用請求方法
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和調用方法也寫在這個文件夾里彩届，建議按模塊劃分文件夾。下面用圖片網(wǎng)站unsplash的api舉例說明蹦渣，此處肯定要涉及到跨域問題哄芜，如果對跨域問題不了解，推薦一篇文章剂桥，講的很棒忠烛。
unsplash的做法是CORS属提，全稱是"跨域資源共享"（Cross-origin resource sharing）跨域資源共享 CORS 詳解权逗，前端啥也不用做美尸，正常發(fā)請求就ok了
src/api/unsplash/url.js（這個文件存放所有模塊相關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'
// 這個東西是unsplash要求加在header里的驗證，有興趣的同學可以去看他的api斟薇，此處不再贅述
const header = {
'Authorization': 'Client-ID xxxxxxx'
}
export default {
viewPhotos (params) {
// return出去了一個promise
return api.get(urls.photos, params, header)
}
}
這些都做完之后师坎，把所有模塊的調用都整合到一個文件里，（這里拆這么細堪滨，項目比較大胯陋，模塊比較多的時候就會體現(xiàn)出好處，方便統(tǒng)一管理）
src/api/apiList.js
// 有多少import多少
import unsplash from './unsplash'
export default {
unsplash
}
掛到Vue的prototype
該配的該寫的都整完了袱箱，最后一步把大象裝冰箱遏乔。。啊不发笔，是把他掛prototype上
src/api/install.js
// 導入模塊
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
}
最后把這個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 }
})
接下來我們就可以愉快地使用了
隨便找個頁面
<template>
<div class="waterfall">
</div>
</template>
<script>
export default {
name: 'waterfall',
data () {
return {
photosList: []
}
},
created () {
this.getPhotos()
},
mounted () {
},
computed: {
},
watch: {
},
methods: {
// async await 是ES7新特性，本質上是generator函數(shù)的語法糖
async getPhotos () {
// 這里用try catch包裹了讨，請求失敗的時候就執(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>
如果報了async await的錯捻激，就還得配一下根目錄的.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"
}
]]
}
總結
以上就是把axios整合進項目的全部步驟前计，一般項目配置這些就夠用了胞谭，要想玩兒的更6，還是得擼文檔啊男杈。丈屹。
