摘要：前言兵馬未動糧草先行同理項目開發過程中經常會出現接口未出前端頁面已搭建完畢的情況此時為了提高前端的開發效率解放生產力我們可以按照預定的接口文檔做一些接口模擬的工作等等后端小伙伴開發完接口后我們只需要替換一個接口基地址即可初始準備這里已項目為

兵馬未動,糧草先行; 同理,項目開發過程中經常會出現接口未出, 前端頁面已搭建完畢的情況;此時為了提高前端的開發效率,解放生產力,我們 FE 可以按照預定的接口文檔做一些接口模擬的工作,等等后端小伙伴開發完接口后我們只需要替換一個接口基地址即可...

這里已 vue 項目為例, 所需模塊:mockjs, express; 直接 npm 進行安裝即可

1.Mock.js  // 用來快速構造隨機數據  http://mockjs.com/examples.html 
2.express // 用來快速搭建本地服務 http://expressjs.jser.us/

一般會在 vue 項目中建一個 mock 文件夾, 里面放上對應處理文件:

主要是分發前端過來的請求 URL 以及啟動本地服務

let Mock = require("mockjs");
let express = require("express");
let app = express();

let bodyParser = require("body-parser"); // 解析post請求

// mock 數據相關 api
let homeAPI = require("./home");
let specialAPI = require("./special");
let appAPI = require("./app");

app.use(bodyParser.json());

// 設置跨域
app.all("*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
    // 此處根據前端請求攜帶的請求頭進行配置
    res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
    next();
});

// 1.首頁接口: post
app.post("/android/home", (req, res) => {
    // 模擬超時
    // setTimeout(() => {
    //     res.json(Mock.mock(homeAPI.getHome(req)));
    // }, 12000);
    res.json(Mock.mock(homeAPI.getHome(req)));
    console.log("請求首頁數據成功...");
})

// 2.專題接口: post
app.post("/android/special/list", (req, res) => {
    res.json(Mock.mock(specialAPI.getSpecialList(req)))
    console.log("請求專題列表數據成功...");
})
app.post("/android/special/detail", (req, res) => {
    res.json(Mock.mock(specialAPI.getSpecialDetail(req)))
    console.log("請求專題詳情數據成功...");
})

// 3.APP 應用接口: post
app.post("/android/special/app", (req, res) => {
    res.json(Mock.mock(appAPI.getAppList(req)))
    console.log("請求app列表數據成功...");
})

app.listen("3000", () => {
    console.log("mock服務器啟動ing中... port: 3000")
})

以上面的 specialApi 為例, 這是用來處理 xxx/special/list接口的模塊

let Mock = require("mockjs");
let Random = Mock.Random;
// 專題模塊
// 1.專題列表
let specialList = [];
let total = 100;
// 準備 100 條專題列表數據
for (let index = 0; index < total; index++) {
    specialList.push(
        Mock.mock({
            id: "@increment",
            title: "@ctitle",
            desc: "
"+Random.cparagraph()+"
",
            icon: "photo/special/1380/special_1380.jpg",
            view_count: "@natural(60, 1000)",
            comment_count: "@natural(60, 100)",
            save_money: "@float(10, 50, 2, 2)",
            app_count: "@natural(10, 100)",
            detail_icon: "https://images.tutuapp.com/photo/special/000/001/" + "@natural(100, 200)" + "/414x155.jpg",
        })
    );
}

module.exports = {
// 列表數據返回
    getSpecialList: config => {
        // 參數解析
        console.log(config.body);
        let { page = 1, size, lang, order_by } = config.body;
        let tempList = [];
        let pageList;
        // 排序類型
        tempList = order_by === "view" ? specialList.reverse() : specialList;
        // 分頁處理
        pageList = tempList.filter((item, index) => index < page * size && index >= (page-1)*size);
        // 返回處理結果, 這里沒做異常狀態碼處理
        return {
            status: {
                code: 0,
                message: "請求成功",
                time: "2019-07-03 16:45:12",
            },
            data: pageList,
        };
    },
// 列表詳情數據返回
    getSpecialDetail: config => {
        let { id, page = 1, size, lang } = config.body;
        return {
            status: {
                code: 0,
                message: "請求成功",
                time: "2019-07-03 16:45:12",
            },
            data: {
                detail: specialList[Math.ceil(1 + Math.random() * 98)],
                total: Math.ceil(Math.random() * 100),
            },
        };
    },
};

這里我們需要在package.json 文件script 字段下新建一行命令去開啟服務器

    "mock": "node src/mock/index.js"
    在終端下執行 npm run mock 即可開啟服務, 接下來我們就可以放心去請求數據了

// 1.引入所需依賴: axios,Vue,store,router,工具函數 toast 等等...
import axios from "axios";
import Vue from "vue";

// 創建 axios 實例
const Axios = axios.create({
    // 添加初始化配置
    baseURL: process.env.BASE_API, // 基地址
    timeout: 10000, // 超時
    // withCredentials: true, // send cookies when cross-domain requests
});

// const TOKEN = window.sessionStorage.getItem("token"); // when set token

// 請求攔截器
Axios.interceptors.request.use(
    config => {
        // TODO: 添加請求頭處理邏輯,如添加 token; 還可以設置開啟請求 loading 動畫
        // config.headers["X-Token"] = TOKEN
        return config;
    },
    error => {
        console.log("request error:", error); // for debug
        return Promise.reject(error);
    }
);

/**
 * 兩種方式做統一處理
 * 1.通過 http狀態碼status:   response.status 和 error.response.status處理
 * 2.通過 response.data中自定義的狀態碼code:  response.data.code 處理(異常處理直接在第一個回調重處理)
 */

// 響應攔截器
Axios.interceptors.response.use(
    response => {
        const res = response.data;
        // 1.通過自定義 code 做統一處理
        // 2.也可以通過 response.status === 200 處理; 這里采用 1
        if (res.status.code === 0) {
            return res.data; // 成功
        } else {
            // for example: 異常的 code 進行自定義處理
            if (res.status.code === 50008 || res.status.code === 50012) {
                // 做一些提示的 toast 處理或者跳轉
                alert("有錯誤!!!");
            }
            return Promise.reject(new Error(res.status.message || "Error"));
        }
        
    },
    error => {
        // 響應錯誤處理: 如超時,斷網,權限等...
        console.log("response error:", error); // for debug 本地開發下沒有狀態碼顯示
        console.log(error.response); // for debug
        // const res = error.response;
        // if (res) {
        //     // 請求已發出，但是不在2xx的范圍
        //     errorHandle(response.status, response.data.message);
        //     return Promise.reject(res);
        // } else {
        //     // 處理斷網或超時...
        //     // 網絡狀態可以在app.vue中控制著一個全局的斷網提示組件的顯示隱藏
        //     if (!window.navigator.onLine) {
        //         console.log("斷網了....");
        //     } else {
        //         return Promise.reject(error);
        //     }
        // }
    }
);

/**
 * 請求失敗后的錯誤統一處理
 * @param {Number} status 請求失敗的狀態碼
 */
const errorHandle = (status, tips) => {
    // 狀態碼判斷
    switch (status) {
        //     // 401: 未登錄狀態，跳轉登錄頁
        //     case 401:
        //         toLogin();
        //         break;
        //     // 403 token過期
        //     // 清除token并跳轉登錄頁
        //     case 403:
        //         tip("登錄過期，請重新登錄");
        //         localStorage.removeItem("token");
        //         store.commit("loginSuccess", null);
        //         setTimeout(() => {
        //             toLogin();
        //         }, 1000);
        //         break;
        // 404請求不存在
        case 404:
            console.log("請求的資源不存在");
            break;
        default:
            console.log(tips);
    }
};

// 實現插件, 暴露install方法, 可以給 vue 實例使用
// 通過 this.$http.post 或者 get 去請求
export const http = {
    install(Vue) {
        Vue.prototype.$http = Axios;
    }
}

// 導出 Axios實例
export default Axios

1.通過插件使用, 在 mian.js 導入
    import { http } from "./api/http";
    Vue.use(http);
    在組件實例中通過 this.$http.post | get去請求
    
2.將請求方法抽離, 引入上面導出的 Axios 實例
    import request from "./http";

    // 首頁請求
    export function getHomeData(data) {
        return request({
            url: "/home",
            method: "post",
            data
        })
    }