首發日期：2019-01-29
作者：http://www.cnblogs.com/progor/
修改：
2019-02-11：發現發起請求的封裝中的export default 寫錯了，是export，在后面的代碼是使用了export ，但有一個地方使用了export default，export導入的在import的時候需要使用固定的名字，export default在import導入的時候可以使用隨意的名字
上節內容回顧
- npm(介紹，安裝，命令)
- 基於npm的Hello World（學會如何初始化一個vue項目，並啟動項目）
- 項目結構分析（重點是src目錄）
- 用法遷移（根實例怎么創建，頁面是怎么渲染的，組件怎么注冊，）
- 小提醒（語法注意，和‘@’）
- 單文件組件
- 路由（開啟路由，定義路由，帶參路由，使用路由（router-link，router-view），嵌套路由，嵌套路由，命名路由，編程式路由，）
- vuex(actioins,mutaions,state,怎么創建store,怎么讀取數據，怎么修改數據)
使用第三方組件庫
網上有很多vue的第三方組件庫，為了簡化開發，我們通常都會使用第三方的組件庫。
下面以導入element UI 組件庫為例：
首先，安裝element UI模塊，並把依賴添加到package.json中：
npm install element-ui --save
然后，如果你是要在整個項目中都用到element UI的話，那就在main.js中添加下列代碼，這樣就可以在所有的組件中使用elmenent UI中的所有組件了：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
如果你僅僅想使用某個組件的話，可以僅僅在某個組件中使用import來導入element UI的組件。
如何發起請求
我們搭建了一個頁面后，通常都希望從后端接口獲取數據來渲染頁面。現在推薦的發起請求的方式是使用axios來發起請求。
首先，我們要安裝axios
npm install axios
然后在組件中使用axios來發請求：
<template>
<div class='hello'>
接受到的數據：{{msg}}
<button @click="getList">獲取數據</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Hello',
data () {
return {
msg: ''
}
},
methods: {
getList () {
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(response => {
this.msg = response
})
}
}
}
</script>
上面只演示了axios.get，類似的，還有axios.post,axios.put等等請求方法。
請求錯誤處理
如果請求失敗了，那么不會跳到then，而是交給catch來處理,catch里面的第一個參數就是錯誤信息：
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response.data.bpi))
.catch(error => console.log(error))
請求帶參
以get的方式帶參：
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json',{params: {ID: 12345}})
.then(response => {
this.msg = response
})
以post的方式帶參：
axios.post('/user', {firstName: 'Fred', lastName: 'Flintstone'})
.then((response) => {
console.log(response)
})
.catch((error) => {
console.log(error)
})
封裝處理
在上面的例子中，我們可以看到如果我們想要發送請求，將要在axios.xxx()的參數中寫很長的代碼。該怎么優化呢？
請求的配置
其實也可以使用axios()來發起請求，axios里面的參數是關於請求的配置，例如：
var request = {
method: 'post',
url: '/user',
data: {firstName: 'Fred', lastName: 'Flintstone'}
}
axios(request).then(response => (this.msg = response))
.catch(error => {
console.log(error)
})
貼一下可以設置的配置：
{
// `url` 是用於請求的服務器 URL
url: '/user',
// `method` 是創建請求時使用的方法
method: 'get', // 默認是 get
// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
// 它可以通過設置一個 `baseURL` 便於為 axios 實例的方法傳遞相對 URL
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允許在向服務器發送前，修改請求數據
// 只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
// 后面數組中的函數必須返回一個字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data) {
// 對 data 進行任意轉換處理
return data;
}],
// `transformResponse` 在傳遞給 then/catch 前，允許修改響應數據
transformResponse: [function (data) {
// 對 data 進行任意轉換處理
return data;
}],
// `headers` 是即將被發送的自定義請求頭
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即將與請求一起發送的 URL 參數
// 必須是一個無格式對象(plain object)或 URLSearchParams 對象
params: {
ID: 12345
},
// `paramsSerializer` 是一個負責 `params` 序列化的函數
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是作為請求主體被發送的數據
// 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH'
// 在沒有設置 `transformRequest` 時，必須是以下類型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 瀏覽器專屬：FormData, File, Blob
// - Node 專屬： Stream
data: {
firstName: 'Fred'
},
// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
// 如果請求話費了超過 `timeout` 的時間，請求將被中斷
timeout: 1000,
// `withCredentials` 表示跨域請求時是否需要使用憑證
withCredentials: false, // 默認的
// `adapter` 允許自定義處理請求，以使測試更輕松
// 返回一個 promise 並應用一個有效的響應 (查閱 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` 表示應該使用 HTTP 基礎驗證，並提供憑據
// 這將設置一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設置的自定義 `Authorization`頭
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示服務器響應的數據類型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // 默認的
// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` 是承載 xsrf token 的值的 HTTP 頭的名稱
xsrfHeaderName: 'X-XSRF-TOKEN', // 默認的
// `onUploadProgress` 允許為上傳處理進度事件
onUploadProgress: function (progressEvent) {
// 對原生進度事件的處理
},
// `onDownloadProgress` 允許為下載處理進度事件
onDownloadProgress: function (progressEvent) {
// 對原生進度事件的處理
},
// `maxContentLength` 定義允許的響應內容的最大尺寸
maxContentLength: 2000,
// `validateStatus` 定義對於給定的HTTP 響應狀態碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設置為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // 默認的
},
// `maxRedirects` 定義在 node.js 中 follow 的最大重定向數目
// 如果設置為0，將不會 follow 任何重定向
maxRedirects: 5, // 默認的
// `httpAgent` 和 `httpsAgent` 分別在 node.js 中用於定義在執行 http 和 https 時使用的自定義代理。允許像這樣配置選項：
// `keepAlive` 默認沒有啟用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' 定義代理服務器的主機名稱和端口
// `auth` 表示 HTTP 基礎驗證應當用於連接代理，並提供憑據
// 這將會設置一個 `Proxy-Authorization` 頭，覆寫掉已有的通過使用 `header` 設置的自定義 `Proxy-Authorization` 頭。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// `cancelToken` 指定用於取消請求的 cancel token
// （查看后面的 Cancellation 這節了解更多）
cancelToken: new CancelToken(function (cancel) {
})
}
axios實例
雖然使用了配置之后不用把參數都寫在axios.xxx()里面了，但是這樣好像每一次都要定義一個關於請求參數的配置。有些數據我是不想重新定義的，能不能再優化呢？我們可以使用axios實例提前來讀取一部分共用配置，然后后續再傳入的配置的會與先前的配置進行合並。
【下面以提前配置baseUrl，后面的配置傳入url為例，如果最終的請求是baseurl和url的拼接結果(通過監聽瀏覽器網絡請求得到)，那么就說明配置合並成功】
var instance = axios.create({
baseURL: 'https://www.baidu.com'
})
var request = {
method: 'get',
url: '/s',
params: {wd: 'vue'}
}
// 當傳入了url參數的時候，才會發起請求，所以雖然都是傳配置，但上面的那個並沒有發起請求
instance(request)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
實現調用自定義函數來發起請求
像上面，我們都是直接調用axios來發起請求的，這可能會導致一些問題，例如在多個組件中都需要發起針對同一個url的請求的時候，如果按照上面直接axios來發起請求的話，那么就會造成代碼冗余（想象一下，針對同一個url請求，卻要在不同組件中都寫一個axios.xxx）。為了減少代碼冗余，我們通常都會進行代碼抽取，我們把重復的代碼都抽取到函數中。
抽取axios請求到函數
上面的例子只是用作演示如何把發起請求的代碼抽取到函數中。事實上，上面的抽取並沒有完全抽取干凈，另一個組件中發起請求時，也要重新定義函數。所以我們要想辦法把上面的函數抽取到一個js文件中，抽取到js文件后，我們就可以通過import來導入了。
抽取函數到js文件
首先， 在src下，我們新建一個文件夾api，在api下，我們創建一個index.js【由於一般會有很多個api請求，為了分文件管理api，我們通常會根據api的功能來把發起請求的函數划分到不同的文件中,所以我們可能有時候會創建類似user.js這樣命名的文件來存儲發起請求的函數。這里由於用於演示，所以命名為index.js】
然后，在index.js中添加下列代碼：
import axios from 'axios'
const request = axios.create({
baseURL: 'http://www.xxxx.com'
})
export function getUserList (params) {
return request({
url: '/getuserlist',
method: 'get',
params: params
})
}
// 可以有多個export function xxxx
最后，在組件中導入getUserList這個函數，並發起請求：
抽取axios對象到js文件
【如果你有留心的話，你應該感覺到上面的axios對象應該也要進行抽取，因為如果有個js文件的話，會導致創建axios對象的這部分代碼贅余了，我們可以把這部分的代碼抽取到src/plugin/axios的index.js中】
import axios from 'axios'
const request = axios.create({
baseURL: 'http://www.xxxx.com'
})
export default request // 記得導出
不要忘了，api中也要對應修改：
響應的數據
請求響應后，響應的數據都會封裝到response中，其中response.data是服務器返回的響應信息，response.status是響應碼，具體如下。
{
// `data` 由服務器提供的響應
data: {},
// `status` 來自服務器響應的 HTTP 狀態碼
status: 200,
// `statusText` 來自服務器響應的 HTTP 狀態信息
statusText: 'OK',
// `headers` 服務器響應的頭
headers: {},
// `config` 是為請求提供的配置信息
config: {}
}
所以請求返回后，我們可以通過response.xxx來獲取響應情況。
攔截器
- 攔截器用於攔截發起的請求或用於攔截返回的響應。
- 為什么需要攔截器呢？例如，假如某個請求需要帶指定的請求頭才能請求成功，我們必須要處理一下請求的信息才能夠請求成功，這時候我們就可以把請求交給攔截器去處理，使用攔截器來加上請求頭是很常見的操作。【加請求頭其實我們也可以手動做，為什么要交給攔截器呢？因為攔截器是攔截所有請求，它能給每一個請求都加上頭，如果交給我們自己做，那就很累了。】
- 所以，攔截器可以攔截發起的請求來添加我們需要的數據；攔截器也可以攔截返回的響應，來過濾響應（比如服務器返回的只有一個狀態碼，那么攔截器可以根據狀態碼來確認“錯誤信息”，其實catch(error)中error的原生數據是比較不友好的，所以我們通常都會使用攔截器來“翻譯”返回的響應）。
攔截請求
攔截器是基於axios實例來添加的。我們可以使用如下代碼來添加一個請求攔截器：
const request = axios.create({
baseURL: 'https://www.xxxx.com'
})
request.interceptors.request.use((config) => { // config是請求的配置
// 這里寫在發送請求之前做些什么，我們這里嘗試加一個請求頭
config.headers['Access-Token'] = '123456'
console.log('發起請求了')
return config
}, (error) => {
// 這里寫對請求錯誤做些什么
return Promise.reject(error)
})
攔截響應
request.interceptors.response.use((response) => {
// 對響應數據做點什么
console.log('請求返回響應了' + response)
return response
}, (error) => {
// 對響應錯誤做點什么
return Promise.reject(error)
})
補充：
- 如果想了解更多，可以查看axios的文檔