後端開發者的Vue學習之路（五）

時間 2019-11-06

原文原文鏈接

目錄css

首發日期：2019-01-29
做者：http://www.cnblogs.com/progor/vue

修改：
2019-02-11：發現發起請求的封裝中的export default 寫錯了，是export，在後面的代碼是使用了export ，但有一個地方使用了export default，export導入的在import的時候須要使用固定的名字，export default在import導入的時候可使用隨意的名字node

上節內容回顧

npm(介紹，安裝，命令)
基於npm的Hello World（學會如何初始化一個vue項目，並啓動項目）
項目結構分析（重點是src目錄）
用法遷移（根實例怎麼建立，頁面是怎麼渲染的，組件怎麼註冊，）
小提醒（語法注意，和‘@’）
單文件組件
路由（開啓路由，定義路由，帶參路由，使用路由（router-link，router-view），嵌套路由，嵌套路由，命名路由，編程式路由，）
vuex(actioins,mutaions,state,怎麼建立store,怎麼讀取數據，怎麼修改數據)

使用第三方組件庫

網上有不少vue的第三方組件庫，爲了簡化開發，咱們一般都會使用第三方的組件庫。jquery

下面以導入element UI 組件庫爲例：
首先，安裝element UI模塊，並把依賴添加到package.json中：
npm install element-ui --saveios

而後，若是你是要在整個項目中都用到element UI的話，那就在main.js中添加下列代碼，這樣就能夠在全部的組件中使用elmenent UI中的全部組件了：vuex

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

若是你僅僅想使用某個組件的話，能夠僅僅在某個組件中使用import來導入element UI的組件。
npm

如何發起請求

咱們搭建了一個頁面後，一般都但願從後端接口獲取數據來渲染頁面。如今推薦的發起請求的方式是使用axios來發起請求。編程

首先，咱們要安裝axios
npm install axioselement-ui

而後在組件中使用axios來發請求：
json

<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)
})