後端開發者的Vue學習之路(五)

人道浮沉發表於2019-01-29

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

修改:
2019-02-11:發現發起請求的封裝中的export default 寫錯了,是export,在後面的程式碼是使用了export ,但有一個地方使用了export default
————

上節內容回顧

  • 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的元件。
後端開發者的Vue學習之路(五)


如何發起請求

我們搭建了一個頁面後,通常都希望從後端介面獲取資料來渲染頁面。現在推薦的發起請求的方式是使用axios來發起請求。

首先,我們要安裝axios
npm install axios

然後在元件中使用axios來發請求:
後端開發者的Vue學習之路(五)

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

後端開發者的Vue學習之路(五)

實現呼叫自定義函式來發起請求

像上面,我們都是直接呼叫axios來發起請求的,這可能會導致一些問題,例如在多個元件中都需要發起針對同一個url的請求的時候,如果按照上面直接axios來發起請求的話,那麼就會造成程式碼冗餘(想象一下,針對同一個url請求,卻要在不同元件中都寫一個axios.xxx)。為了減少程式碼冗餘,我們通常都會進行程式碼抽取,我們把重複的程式碼都抽取到函式中。

抽取axios請求到函式

後端開發者的Vue學習之路(五)
上面的例子只是用作演示如何把發起請求的程式碼抽取到函式中。事實上,上面的抽取並沒有完全抽取乾淨,另一個元件中發起請求時,也要重新定義函式。所以我們要想辦法把上面的函式抽取到一個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這個函式,併發起請求:
後端開發者的Vue學習之路(五)

抽取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中也要對應修改:
後端開發者的Vue學習之路(五)

響應的資料

請求響應後,響應的資料都會封裝到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)
})

補充:


相關文章