摘要：由服務(wù)器提供的響應(yīng)來(lái)自服務(wù)器響應(yīng)的狀態(tài)碼來(lái)自服務(wù)器響應(yīng)的狀態(tài)信息服務(wù)器響應(yīng)的頭是為請(qǐng)求提供的配置信息所以請(qǐng)求返回后，我們可以通過(guò)來(lái)獲取響應(yīng)情況。攔截器攔截器攔截器用于攔截發(fā)起的請(qǐng)求或用于攔截返回的響應(yīng)。

目錄

• 上節(jié)內(nèi)容回顧
• 使用第三方組件庫(kù)
• 如何發(fā)起請(qǐng)求
  • 請(qǐng)求錯(cuò)誤處理
  • 請(qǐng)求帶參
    • 以get的方式帶參：
    • 以post的方式帶參：
  • 封裝處理
    • 請(qǐng)求的配置
    • axios實(shí)例
  • 實(shí)現(xiàn)調(diào)用自定義函數(shù)來(lái)發(fā)起請(qǐng)求
    • 抽取axios請(qǐng)求到函數(shù)
    • 抽取函數(shù)到j(luò)s文件
    • 抽取axios對(duì)象到j(luò)s文件
  • 響應(yīng)的數(shù)據(jù)
  • 攔截器
    • 攔截請(qǐng)求
    • 攔截響應(yīng)
  • 補(bǔ)充：

首發(fā)日期：2019-01-29
作者：http://www.cnblogs.com/progor/

修改：
2019-02-11：發(fā)現(xiàn)發(fā)起請(qǐng)求的封裝中的export default 寫(xiě)錯(cuò)了，是export，在后面的代碼是使用了export ，但有一個(gè)地方使用了export default
------------

上節(jié)內(nèi)容回顧

• npm(介紹，安裝，命令)
• 基于npm的Hello World（學(xué)會(huì)如何初始化一個(gè)vue項(xiàng)目，并啟動(dòng)項(xiàng)目）
• 項(xiàng)目結(jié)構(gòu)分析（重點(diǎn)是src目錄）
• 用法遷移（根實(shí)例怎么創(chuàng)建，頁(yè)面是怎么渲染的，組件怎么注冊(cè)，）
• 小提醒（語(yǔ)法注意，和‘@’）
• 單文件組件
• 路由（開(kāi)啟路由，定義路由，帶參路由，使用路由（router-link，router-view），嵌套路由，嵌套路由，命名路由，編程式路由，）
• vuex(actioins,mutaions,state,怎么創(chuàng)建store,怎么讀取數(shù)據(jù)，怎么修改數(shù)據(jù))

使用第三方組件庫(kù)

網(wǎng)上有很多vue的第三方組件庫(kù)，為了簡(jiǎn)化開(kāi)發(fā)，我們通常都會(huì)使用第三方的組件庫(kù)。

下面以導(dǎo)入element UI 組件庫(kù)為例：
首先，安裝element UI模塊，并把依賴添加到package.json中：
npm install element-ui --save

然后，如果你是要在整個(gè)項(xiàng)目中都用到element UI的話，那就在main.js中添加下列代碼，這樣就可以在所有的組件中使用elmenent UI中的所有組件了：

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

如果你僅僅想使用某個(gè)組件的話，可以僅僅在某個(gè)組件中使用import來(lái)導(dǎo)入element UI的組件。

如何發(fā)起請(qǐng)求

我們搭建了一個(gè)頁(yè)面后，通常都希望從后端接口獲取數(shù)據(jù)來(lái)渲染頁(yè)面?，F(xiàn)在推薦的發(fā)起請(qǐng)求的方式是使用axios來(lái)發(fā)起請(qǐng)求。

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

然后在組件中使用axios來(lái)發(fā)請(qǐng)求：

上面只演示了axios.get，類(lèi)似的，還有axios.post,axios.put等等請(qǐng)求方法。

請(qǐng)求錯(cuò)誤處理

如果請(qǐng)求失敗了，那么不會(huì)跳到then，而是交給catch來(lái)處理,catch里面的第一個(gè)參數(shù)就是錯(cuò)誤信息：

axios
  .get("https://api.coindesk.com/v1/bpi/currentprice.json")
  .then(response => (this.info = response.data.bpi))
  .catch(error => console.log(error))

請(qǐng)求帶參

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

封裝處理

在上面的例子中，我們可以看到如果我們想要發(fā)送請(qǐng)求，將要在axios.xxx()的參數(shù)中寫(xiě)很長(zhǎng)的代碼。該怎么優(yōu)化呢？

請(qǐng)求的配置

其實(shí)也可以使用axios()來(lái)發(fā)起請(qǐng)求，axios里面的參數(shù)是關(guān)于請(qǐng)求的配置，例如：

      var request = {
        method: "post",
        url: "/user",
        data: {firstName: "Fred", lastName: "Flintstone"}
      }
      axios(request).then(response => (this.msg = response))
        .catch(error => {
          console.log(error)
        })

貼一下可以設(shè)置的配置：

{
  // `url` 是用于請(qǐng)求的服務(wù)器 URL
  url: "/user",

  // `method` 是創(chuàng)建請(qǐng)求時(shí)使用的方法
  method: "get", // 默認(rèn)是 get

  // `baseURL` 將自動(dòng)加在 `url` 前面，除非 `url` 是一個(gè)絕對(duì) URL。
  // 它可以通過(guò)設(shè)置一個(gè) `baseURL` 便于為 axios 實(shí)例的方法傳遞相對(duì) URL
  baseURL: "https://some-domain.com/api/",

  // `transformRequest` 允許在向服務(wù)器發(fā)送前，修改請(qǐng)求數(shù)據(jù)
  // 只能用在 "PUT", "POST" 和 "PATCH" 這幾個(gè)請(qǐng)求方法
  // 后面數(shù)組中的函數(shù)必須返回一個(gè)字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 對(duì) data 進(jìn)行任意轉(zhuǎn)換處理

    return data;
  }],

  // `transformResponse` 在傳遞給 then/catch 前，允許修改響應(yīng)數(shù)據(jù)
  transformResponse: [function (data) {
    // 對(duì) data 進(jìn)行任意轉(zhuǎn)換處理

    return data;
  }],

  // `headers` 是即將被發(fā)送的自定義請(qǐng)求頭
  headers: {"X-Requested-With": "XMLHttpRequest"},

  // `params` 是即將與請(qǐng)求一起發(fā)送的 URL 參數(shù)
  // 必須是一個(gè)無(wú)格式對(duì)象(plain object)或 URLSearchParams 對(duì)象
  params: {
    ID: 12345
  },

  // `paramsSerializer` 是一個(gè)負(fù)責(zé) `params` 序列化的函數(shù)
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: "brackets"})
  },

  // `data` 是作為請(qǐng)求主體被發(fā)送的數(shù)據(jù)
  // 只適用于這些請(qǐng)求方法 "PUT", "POST", 和 "PATCH"
  // 在沒(méi)有設(shè)置 `transformRequest` 時(shí)，必須是以下類(lèi)型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 瀏覽器專屬：FormData, File, Blob
  // - Node 專屬： Stream
  data: {
    firstName: "Fred"
  },

  // `timeout` 指定請(qǐng)求超時(shí)的毫秒數(shù)(0 表示無(wú)超時(shí)時(shí)間)
  // 如果請(qǐng)求話費(fèi)了超過(guò) `timeout` 的時(shí)間，請(qǐng)求將被中斷
  timeout: 1000,

  // `withCredentials` 表示跨域請(qǐng)求時(shí)是否需要使用憑證
  withCredentials: false, // 默認(rèn)的

  // `adapter` 允許自定義處理請(qǐng)求，以使測(cè)試更輕松
  // 返回一個(gè) promise 并應(yīng)用一個(gè)有效的響應(yīng) (查閱 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

  // `auth` 表示應(yīng)該使用 HTTP 基礎(chǔ)驗(yàn)證，并提供憑據(jù)
  // 這將設(shè)置一個(gè) `Authorization` 頭，覆寫(xiě)掉現(xiàn)有的任意使用 `headers` 設(shè)置的自定義 `Authorization`頭
  auth: {
    username: "janedoe",
    password: "s00pers3cret"
  },

  // `responseType` 表示服務(wù)器響應(yīng)的數(shù)據(jù)類(lèi)型，可以是 "arraybuffer", "blob", "document", "json", "text", "stream"
  responseType: "json", // 默認(rèn)的

  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱
  xsrfCookieName: "XSRF-TOKEN", // default

  // `xsrfHeaderName` 是承載 xsrf token 的值的 HTTP 頭的名稱
  xsrfHeaderName: "X-XSRF-TOKEN", // 默認(rèn)的

  // `onUploadProgress` 允許為上傳處理進(jìn)度事件
  onUploadProgress: function (progressEvent) {
    // 對(duì)原生進(jìn)度事件的處理
  },

  // `onDownloadProgress` 允許為下載處理進(jìn)度事件
  onDownloadProgress: function (progressEvent) {
    // 對(duì)原生進(jìn)度事件的處理
  },

  // `maxContentLength` 定義允許的響應(yīng)內(nèi)容的最大尺寸
  maxContentLength: 2000,

  // `validateStatus` 定義對(duì)于給定的HTTP 響應(yīng)狀態(tài)碼是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者設(shè)置為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默認(rèn)的
  },

  // `maxRedirects` 定義在 node.js 中 follow 的最大重定向數(shù)目
  // 如果設(shè)置為0，將不會(huì) follow 任何重定向
  maxRedirects: 5, // 默認(rèn)的

  // `httpAgent` 和 `httpsAgent` 分別在 node.js 中用于定義在執(zhí)行 http 和 https 時(shí)使用的自定義代理。允許像這樣配置選項(xiàng)：
  // `keepAlive` 默認(rèn)沒(méi)有啟用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // "proxy" 定義代理服務(wù)器的主機(jī)名稱和端口
  // `auth` 表示 HTTP 基礎(chǔ)驗(yàn)證應(yīng)當(dāng)用于連接代理，并提供憑據(jù)
  // 這將會(huì)設(shè)置一個(gè) `Proxy-Authorization` 頭，覆寫(xiě)掉已有的通過(guò)使用 `header` 設(shè)置的自定義 `Proxy-Authorization` 頭。
  proxy: {
    host: "127.0.0.1",
    port: 9000,
    auth: : {
      username: "mikeymike",
      password: "rapunz3l"
    }
  },

  // `cancelToken` 指定用于取消請(qǐng)求的 cancel token
  // （查看后面的 Cancellation 這節(jié)了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}

axios實(shí)例

雖然使用了配置之后不用把參數(shù)都寫(xiě)在axios.xxx()里面了，但是這樣好像每一次都要定義一個(gè)關(guān)于請(qǐng)求參數(shù)的配置。有些數(shù)據(jù)我是不想重新定義的，能不能再優(yōu)化呢？我們可以使用axios實(shí)例提前來(lái)讀取一部分共用配置，然后后續(xù)再傳入的配置的會(huì)與先前的配置進(jìn)行合并。
【下面以提前配置baseUrl，后面的配置傳入url為例，如果最終的請(qǐng)求是baseurl和url的拼接結(jié)果(通過(guò)監(jiān)聽(tīng)瀏覽器網(wǎng)絡(luò)請(qǐng)求得到)，那么就說(shuō)明配置合并成功】

      var instance = axios.create({
        baseURL: "https://www.baidu.com"
      })
      var request = {
        method: "get",
        url: "/s",
        params: {wd: "vue"}
      }
      // 當(dāng)傳入了url參數(shù)的時(shí)候，才會(huì)發(fā)起請(qǐng)求，所以雖然都是傳配置，但上面的那個(gè)并沒(méi)有發(fā)起請(qǐng)求
      instance(request)
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.log(error)
        })

實(shí)現(xiàn)調(diào)用自定義函數(shù)來(lái)發(fā)起請(qǐng)求

像上面，我們都是直接調(diào)用axios來(lái)發(fā)起請(qǐng)求的，這可能會(huì)導(dǎo)致一些問(wèn)題，例如在多個(gè)組件中都需要發(fā)起針對(duì)同一個(gè)url的請(qǐng)求的時(shí)候，如果按照上面直接axios來(lái)發(fā)起請(qǐng)求的話，那么就會(huì)造成代碼冗余（想象一下，針對(duì)同一個(gè)url請(qǐng)求，卻要在不同組件中都寫(xiě)一個(gè)axios.xxx）。為了減少代碼冗余，我們通常都會(huì)進(jìn)行代碼抽取，我們把重復(fù)的代碼都抽取到函數(shù)中。

抽取axios請(qǐng)求到函數(shù)

上面的例子只是用作演示如何把發(fā)起請(qǐng)求的代碼抽取到函數(shù)中。事實(shí)上，上面的抽取并沒(méi)有完全抽取干凈，另一個(gè)組件中發(fā)起請(qǐng)求時(shí)，也要重新定義函數(shù)。所以我們要想辦法把上面的函數(shù)抽取到一個(gè)js文件中，抽取到j(luò)s文件后，我們就可以通過(guò)import來(lái)導(dǎo)入了。

抽取函數(shù)到j(luò)s文件

首先， 在src下，我們新建一個(gè)文件夾api，在api下，我們創(chuàng)建一個(gè)index.js【由于一般會(huì)有很多個(gè)api請(qǐng)求，為了分文件管理api，我們通常會(huì)根據(jù)api的功能來(lái)把發(fā)起請(qǐng)求的函數(shù)劃分到不同的文件中,所以我們可能有時(shí)候會(huì)創(chuàng)建類(lèi)似user.js這樣命名的文件來(lái)存儲(chǔ)發(fā)起請(qǐng)求的函數(shù)。這里由于用于演示，所以命名為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
  })
}

// 可以有多個(gè)export function xxxx

最后，在組件中導(dǎo)入getUserList這個(gè)函數(shù)，并發(fā)起請(qǐng)求：

抽取axios對(duì)象到j(luò)s文件

【如果你有留心的話，你應(yīng)該感覺(jué)到上面的axios對(duì)象應(yīng)該也要進(jìn)行抽取，因?yàn)槿绻袀€(gè)js文件的話，會(huì)導(dǎo)致創(chuàng)建axios對(duì)象的這部分代碼贅余了，我們可以把這部分的代碼抽取到src/plugin/axios的index.js中】

import axios from "axios"

const request = axios.create({
  baseURL: "http://www.xxxx.com"
})
export default request // 記得導(dǎo)出

不要忘了，api中也要對(duì)應(yīng)修改：

響應(yīng)的數(shù)據(jù)

請(qǐng)求響應(yīng)后，響應(yīng)的數(shù)據(jù)都會(huì)封裝到response中，其中response.data是服務(wù)器返回的響應(yīng)信息，response.status是響應(yīng)碼，具體如下。

{
  // `data` 由服務(wù)器提供的響應(yīng)
  data: {},

  // `status` 來(lái)自服務(wù)器響應(yīng)的 HTTP 狀態(tài)碼
  status: 200,

  // `statusText` 來(lái)自服務(wù)器響應(yīng)的 HTTP 狀態(tài)信息
  statusText: "OK",

  // `headers` 服務(wù)器響應(yīng)的頭
  headers: {},

  // `config` 是為請(qǐng)求提供的配置信息
  config: {}
}

所以請(qǐng)求返回后，我們可以通過(guò)response.xxx來(lái)獲取響應(yīng)情況。

攔截器

• 攔截器用于攔截發(fā)起的請(qǐng)求或用于攔截返回的響應(yīng)。
• 為什么需要攔截器呢？例如，假如某個(gè)請(qǐng)求需要帶指定的請(qǐng)求頭才能請(qǐng)求成功，我們必須要處理一下請(qǐng)求的信息才能夠請(qǐng)求成功，這時(shí)候我們就可以把請(qǐng)求交給攔截器去處理，使用攔截器來(lái)加上請(qǐng)求頭是很常見(jiàn)的操作?！炯诱?qǐng)求頭其實(shí)我們也可以手動(dòng)做，為什么要交給攔截器呢？因?yàn)閿r截器是攔截所有請(qǐng)求，它能給每一個(gè)請(qǐng)求都加上頭，如果交給我們自己做，那就很累了?！?/li>
• 所以，攔截器可以攔截發(fā)起的請(qǐng)求來(lái)添加我們需要的數(shù)據(jù)；攔截器也可以攔截返回的響應(yīng)，來(lái)過(guò)濾響應(yīng)（比如服務(wù)器返回的只有一個(gè)狀態(tài)碼，那么攔截器可以根據(jù)狀態(tài)碼來(lái)確認(rèn)“錯(cuò)誤信息”，其實(shí)catch(error)中error的原生數(shù)據(jù)是比較不友好的，所以我們通常都會(huì)使用攔截器來(lái)“翻譯”返回的響應(yīng)）。

攔截請(qǐng)求

攔截器是基于axios實(shí)例來(lái)添加的。我們可以使用如下代碼來(lái)添加一個(gè)請(qǐng)求攔截器：

const request = axios.create({
  baseURL: "https://www.xxxx.com"
})

request.interceptors.request.use((config) => { // config是請(qǐng)求的配置
// 這里寫(xiě)在發(fā)送請(qǐng)求之前做些什么，我們這里嘗試加一個(gè)請(qǐng)求頭
  config.headers["Access-Token"] = "123456"
  console.log("發(fā)起請(qǐng)求了")
  return config
}, (error) => {
// 這里寫(xiě)對(duì)請(qǐng)求錯(cuò)誤做些什么
  return Promise.reject(error)
})

攔截響應(yīng)

request.interceptors.response.use((response) => {
  // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
  console.log("請(qǐng)求返回響應(yīng)了" + response)
  return response
}, (error) => {
  // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
  return Promise.reject(error)
})

補(bǔ)充：

• 如果想了解更多，可以查看axios的文檔