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

抱歉生病拖更了，1024快樂(lè)

上回還真的有同學(xué)提到了這個(gè)問(wèn)題，感謝細(xì)心的你。@_noob

其實(shí)是沒(méi)任何問(wèn)題的，只不過(guò)看起來(lái)違背了常見(jiàn)的結(jié)構(gòu)，像是有問(wèn)題。其實(shí)是上文為了照顧初學(xué)者，怕大家因?yàn)槁闊┒艞墸](méi)有一次性改的“看起來(lái)那么復(fù)雜”，我們來(lái)填下坑。

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

我們把上文的 renderer/src 改成比較容易理解的 src/renderer ,這其實(shí)是一個(gè)編程習(xí)慣問(wèn)題。

上文 renderer/src 的問(wèn)題

eslint-config-alloy : 想寫出更規(guī)范的代碼可以參考這個(gè)規(guī)則

下面進(jìn)入本章正題

使用了 vue 的你，發(fā)現(xiàn) Vue 居然不能發(fā)請(qǐng)求，于是你 Google 了下，發(fā)現(xiàn)可以用 Vue-Resource。
你去問(wèn)別人 Vue-Resource 怎么樣，他說(shuō)不要用 Vue-Resource，因?yàn)?Vue-Resource 官方已經(jīng)停止維護(hù)了，你應(yīng)該用 Axios、或者 fetch。但是我們想擁抱 ES6 排除掉了 ES5的fetch（當(dāng)然也有ES6-fetch），這里我們使用 Axios！

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

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

不過(guò)基本不用擔(dān)心，官網(wǎng)都會(huì)提供 start 說(shuō)明，但是我們要大概明白意思，不要機(jī)械般的 copy。

直接玩最新的

2018-09-28 截圖 npmjs.com

添加依賴

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

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

還記得我們自動(dòng)生成的 vue 主頁(yè)面腳本 main.js嗎？

我們?cè)?src/renderer/utils 建立一個(gè) request.js 在這個(gè)請(qǐng)求腳本中，對(duì) Axios 做一些必要的封裝，大概內(nèi)容是用 攔截器 axios.interceptors 對(duì)請(qǐng)求和響應(yīng)做些攔截，定義一下 API 的前綴，處理一些常見(jiàn)的 HTTP 狀態(tài)碼。

interceptors 文檔

我盡可能的為大家寫了詳細(xì)的注釋。

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

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

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

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

            //todo:加載動(dòng)畫(huà)

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

            };

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


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

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

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

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

這樣我們?cè)趯憳I(yè)務(wù)邏輯，直接在 Vue 的上下文中 使用 this.$http 來(lái)發(fā)送請(qǐng)求。既實(shí)現(xiàn)了攔截、又實(shí)現(xiàn)了狀態(tài)的共享。

知其然，知其所以然

這樣做的意義在哪？

節(jié)省代碼量，讓代碼更加易讀

為什么？

擴(kuò)展到原型鏈，使 Axios 運(yùn)行時(shí)共享 Vue 原型鏈的內(nèi)容，減少了很多指代 Vue 的臨時(shí)變量

舉個(gè)栗子

傳統(tǒng)情況

import axios from "axios"


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

代理之后

 


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

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

先簡(jiǎn)單弄一下，為前后分離打個(gè)小鋪墊

webPack 的別名

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

為了使用起來(lái)更加優(yōu)雅，可以為每個(gè)常用的目錄都建立別名

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 是開(kāi)發(fā)時(shí)啟動(dòng)的指令
build 是預(yù)發(fā)布時(shí) webPack 打包的指令

假設(shè)筆者只是一個(gè)前端，通常呢，在開(kāi)發(fā)調(diào)試過(guò)程當(dāng)中，無(wú)法避免需要與后端的同學(xué)進(jìn)行 API 的對(duì)接，那也就難免會(huì)出現(xiàn)跨域問(wèn)題。當(dāng)然傳統(tǒng) javaWeb 不需要跨域，(ip 域 端口 任何一個(gè)不同皆為跨域) 在 DEV 模式調(diào)試中，我們都是盡量選擇前端環(huán)境規(guī)避跨域問(wèn)題，而不會(huì)去額外搭建 nginx 或更改后端代碼。

跨域只是針對(duì) JavaScript 的，因?yàn)殚_(kāi)發(fā)者認(rèn)為瀏覽器上的腳本是不安全的。

既然我們的 vue 項(xiàng)目是 node 全家桶，依靠 node、webPack 編譯 我們直接配置 node 的 proxyTable 作為開(kāi)發(fā)的代理器，這樣最簡(jiǎn)單，依次配置，團(tuán)隊(duì)受益。

https://cnodejs.org/api
上邊cnode 的 API 是可以隨意調(diào)用的，因?yàn)楹蠖俗隽颂幚怼?/p>

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

哦，我們適配一下 node 代理

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

擴(kuò)展一下 proxyTable：

proxyTable: [{
      //攔截所有v1開(kāi)頭的xhr請(qǐng)求
      context: ["/v1"], 
      target: "https://xiaoce-timeline-api-ms.juejin.im",
      cookieDomainRewrite: {
        // 不用cookie
      },
      changeOrigin: true,//重點(diǎn)，此處本地就會(huì)虛擬一個(gè)服務(wù)替我們接受或轉(zhuǎn)發(fā)請(qǐng)求
      secure: false
    }],

再次發(fā)送請(qǐng)求。

愉快的拿到了數(shù)據(jù)

這樣，前后分離的項(xiàng)目可以這樣借助 swagger 測(cè)試接口，不需要騷擾任何人。實(shí)現(xiàn)自己的業(yè)務(wù)邏輯，簡(jiǎn)單實(shí)現(xiàn)一點(diǎn)。

代碼:

// blog/index.vue

掃盲

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