摘要：工欲善其事必先利其器繼續打磨前端架構抱歉生病拖更了，快樂本文永久更新地址填坑上回還真的有同學提到了這個問題，感謝細心的你。既實現了攔截又實現了狀態的共享。愉快的拿到了數據這樣，前后分離的項目可以這樣借助測試接口，不需要騷擾任何人。

抱歉生病拖更了，1024快樂

上回還真的有同學提到了這個問題，感謝細心的你。@_noob

其實是沒任何問題的，只不過看起來違背了常見的結構，像是有問題。其實是上文為了照顧初學者，怕大家因為麻煩而放棄，并沒有一次性改的“看起來那么復雜”，我們來填下坑。

為了照顧沒有實時跟著我連載的同學，每一章的代碼多帶帶發布在我的 Github 博客，不進行覆蓋更新 [除非代碼有錯誤進行修改]，這樣避免了 2019 年小明同學望著前兩章和 Github 最終版本代碼發呆 ( release 也不是特別友好)

我們把上文的 renderer/src 改成比較容易理解的 src/renderer ,這其實是一個編程習慣問題。

上文 renderer/src 的問題

eslint-config-alloy : 想寫出更規范的代碼可以參考這個規則

下面進入本章正題

使用了 vue 的你，發現 Vue 居然不能發請求，于是你 Google 了下，發現可以用 Vue-Resource。
你去問別人 Vue-Resource 怎么樣，他說不要用 Vue-Resource，因為 Vue-Resource 官方已經停止維護了，你應該用 Axios、或者 fetch。但是我們想擁抱 ES6 排除掉了 ES5的fetch（當然也有ES6-fetch），這里我們使用 Axios！

這里呢也科普一下：什么時候依賴需要放到 dependencies、什么時候依賴需要放到 devDependencies：

devDependencies：顧名思義，僅在開發（dev）模式下如：webpack.、.loader、eslint、babel、打包后部署時完全用不到的、僅在開發需要 編譯、檢測、轉換 的放在這里。
dependencies：例如：axios、chart、js-cookie、less、lodash、underscore等運行時的庫或工具類等相關依賴我們要放在這里

不過基本不用擔心，官網都會提供 start 說明，但是我們要大概明白意思，不要機械般的 copy。

直接玩最新的

2018-09-28 截圖 npmjs.com

添加依賴

"dependencies": {    
    "axios": "^0.18.0"
 }

基于上一章內容,別忘了重新 npm i 下載一下

還記得我們自動生成的 vue 主頁面腳本 main.js嗎？

我們在 src/renderer/utils 建立一個 request.js 在這個請求腳本中，對 Axios 做一些必要的封裝，大概內容是用 攔截器 axios.interceptors 對請求和響應做些攔截，定義一下 API 的前綴，處理一些常見的 HTTP 狀態碼。

interceptors 文檔

我盡可能的為大家寫了詳細的注釋。

// src/renderer/utils/request.js
import axios from "axios"

//這里一般指后端項目API的前綴，例如 /baidu/*/*/1.api  /mi/*/*/2.api
const BASE_API = ""

export function axiosIntercept(Vue, router) {
    const axiosIntercept = axios.create({
        baseURL: BASE_API
    })

    //http request 攔截器 一般用來在請求前塞一些全局的配置、或開啟一些 css 加載動畫
    axios.interceptors.request.use(
        (config) => {
            // 判斷是否存在token，如果存在的話，則每個http header都加上token
            // if (store.getters.accessToken) {
            //     console.log(store.getters.accessToken)
            //     config.headers.Authorization = `token ${store.getters.accessToken}`;
            // }

            //todo:加載動畫

            //若有需求可以處理一下 post 亦或改變post傳輸格式
            if (config.method === "post") {

            };

            return config;
        }, function (err) {
            return Promise.reject(err);
        });


    //http response 攔截器 一般用來根據一些后端協議特殊返回值做一些處理，例如：權限方面、404... 或關閉一些 css 加載動畫
    axiosIntercept.interceptors.response.use(function (response) {
        // todo: 暫停加載動畫
        return response;
    }, function (err) {
        //捕獲異常
        if (err.response) {
            switch (err.response.status) {
                case 401:
                    // do something 這里我們寫完后端做好約束再完善
            }
        }
        return Promise.reject(err);
    });
    return axiosIntercept;
}

大家還記得我們用 vue-cli 生成的 vue 主頁腳本 main.js 吧，這里我們需要對 Axios 和 Vue 做一個耦合。

// src/renderer/main.js
import axios from "axios"
import { axiosIntercept } from "./utils/request"

// 將Axios擴展到Vue原型鏈中
Vue.prototype.$http = axiosIntercept(Vue)

這樣我們在寫業務邏輯，直接在 Vue 的上下文中 使用 this.$http 來發送請求。既實現了攔截、又實現了狀態的共享。

知其然，知其所以然

這樣做的意義在哪？

節省代碼量，讓代碼更加易讀

為什么？

擴展到原型鏈，使 Axios 運行時共享 Vue 原型鏈的內容，減少了很多指代 Vue 的臨時變量

舉個栗子

傳統情況

import axios from "axios"


new Vue({
  data: {
    user: ""
  },
  created: function () {
    //此時作用域在 Vue 上,緩存起來,要依賴此變量
    let _this = this;
    axios.get("/user/getUserInfo/" + userName).then(res => {
            if (res.data.code === 200) {
                //此時作用域在axios上，拿不到vue綁定的值，只能借助剛才緩存的_this上下文
                _this.data.user = res.data.user
            }
        });
    }
})

代理之后

 


new Vue({
  data: {
    user: ""
  },
  created: function () {
    // axios 成為了 vue 的原型鏈一部分，共享vue狀態。
    
    this.$http.get("/user/getUserInfo/" + userName).then(res => {
            if (res.data.code === 200) {
                //注意，axios回調，應該盡量使用箭頭函數，可以繼承父類上下文，否則類似閉包，還是無法共享變量、
                // 更優雅了一些
                this.data.user = res.data.user
            }
        });
    }
})

不懂 prototype 可以翻翻我以前寫的文章

先簡單弄一下，為前后分離打個小鋪墊

webPack 的別名

resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "@": resolve("src/renderer"),
    }
  },

為了使用起來更加優雅，可以為每個常用的目錄都建立別名

resolve: {
   extensions: [".js", ".vue", ".json"],
   alias: {
     "vue$": "vue/dist/vue.esm.js",
     "@": resolve("src/renderer"),
     "assets": resolve("src/renderer/assets"),
     "components": resolve("src/renderer/components"),
     "container": resolve("src/renderer/container"),
     "utils": resolve("src/renderer/utils")
   }
 },

dev 是開發時啟動的指令
build 是預發布時 webPack 打包的指令

假設筆者只是一個前端，通常呢，在開發調試過程當中，無法避免需要與后端的同學進行 API 的對接，那也就難免會出現跨域問題。當然傳統 javaWeb 不需要跨域，(ip 域 端口 任何一個不同皆為跨域) 在 DEV 模式調試中，我們都是盡量選擇前端環境規避跨域問題，而不會去額外搭建 nginx 或更改后端代碼。

跨域只是針對 JavaScript 的，因為開發者認為瀏覽器上的腳本是不安全的。

既然我們的 vue 項目是 node 全家桶，依靠 node、webPack 編譯 我們直接配置 node 的 proxyTable 作為開發的代理器，這樣最簡單，依次配置，團隊受益。

https://cnodejs.org/api
上邊cnode 的 API 是可以隨意調用的，因為后端做了處理。

看看掘金的：
https://xiaoce-timeline-api-m...
請求一下，不出意外瀏覽器做了跨域報警。

哦，我們適配一下 node 代理

官方例子在這：
https://vuejs-templates.githu...

擴展一下 proxyTable：

proxyTable: [{
      //攔截所有v1開頭的xhr請求
      context: ["/v1"], 
      target: "https://xiaoce-timeline-api-ms.juejin.im",
      cookieDomainRewrite: {
        // 不用cookie
      },
      changeOrigin: true,//重點，此處本地就會虛擬一個服務替我們接受或轉發請求
      secure: false
    }],

再次發送請求。

愉快的拿到了數據

這樣，前后分離的項目可以這樣借助 swagger 測試接口，不需要騷擾任何人。實現自己的業務邏輯，簡單實現一點。

代碼:

// blog/index.vue

掃盲

寫完代碼之后部署到線上，是不會在線上 clone 代碼之后 Npm run dev 的