vue项目接入mock&& axios 通用配置
前端  /  管理员 发布于 5年前   210
前言
兵马未动,粮草先行; 同理,项目开发过程中经常会出现接口未出, 前端页面已搭建完毕的情况;此时为了提高前端的开发效率,解放生产力,我们 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 数据相关 apilet 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.首页接口: postapp.post('/android/home', (req, res) => { // 模拟超时 // setTimeout(() => { // res.json(Mock.mock(homeAPI.getHome(req))); // }, 12000); res.json(Mock.mock(homeAPI.getHome(req))); console.log('请求首页数据成功...');})// 2.专题接口: postapp.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 应用接口: postapp.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 即可开启服务, 接下来我们就可以放心去请求数据了
// 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 }) }
原文:https://segmentfault.com/a/1190000019964344
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号