前言
兵馬未動,糧草先行; 同理,項目開發過程中經常會出現接口未出, 前端頁面已搭建完畢的情況;此時爲了提高前端的開發效率,解放生產力,我們 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: '<p>'+Random.cparagraph()+'</p>',
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 即可開啓服務, 接下來我們就可以放心去請求數據了
axios 通用配置
1.創建 axios 實例
// 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
2.使用
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
})
}