vue项目接入mock&& axios 通用配置

更新日期: 2019-08-04阅读: 2.4k标签: 接口

前言

兵马未动,粮草先行; 同理,项目开发过程中经常会出现接口未出, 前端页面已搭建完毕的情况;此时为了提高前端的开发效率,解放生产力,我们 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
        })
    }

原文:https://segmentfault.com/a/1190000019964344


链接: https://www.fly63.com/article/detial/4500

为什么前后端分离了,你比从前更痛苦?

前后端分离可以让我们的职责更清晰,打破前端发挥的局限,工作解耦之后能更好的提高开发效率。然而因为没有规划好开发流程,导致了我们没有发挥出其应有的价值,造成了更多的浪费。

前后端分离项目的跨域及保持Session会话

当Web项目前后端分离开发的时候, 由于域名不一致, 会出现无法请求和无法维持会话的情况,在前端Ajax请求后台的时候, 打开控制台可以看到, 每一次请求之前都会有一次OPTIONS类型的请求

PHP面向对象(抽象类与抽象方法、接口的实现)

任何一个类,如果它里面至少有一个方法是被声明为抽象的,那么这个类就必须被声明为抽象的。定义为抽象的类不能被实例化。 被定义为抽象的方法只是声明了其调用方式(参数),不能定义其具体的功能实现。

vue 项目接口管理

在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢?方法可能不只一种,本文使用axios+async/await进行接口的统一管理。

免费的公共API接口_WebService接口大全

这篇文章为大家整理一下免费,常用的的WebService接口,列举一些搜集到的免费的公共API接口,希望对你有所帮助,天气预报Web服务,数据来源于中国气象局;IP地址来源搜索 WEB 服务;随机英文、数字和中文简体字

常用HTTP接口测试工具对比

从功能上Jmeter最为强大,可以测试各种类型的接口,不支持的也可以通过网上或自己编写的插件进行扩展。SoapUI专门针对HTTP类型的两种接口,其初衷更是专门测试Soap类型接口,对于其他协议的接口不支持

TypeScript接口(Interfaces)来定义对象的类型

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implements)

你不得不了解的前后端分离原理!

前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构

vue中使用proxy配置不同端口和ip接口

使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致,解决问题:在vue.config.js中配置不同的端口号

TypeScript接口

接口的作用是声明变量的结构和方法,但不做具体的实现。通常,接口会强制对所有成员进行类型检查,包括数量和类型:带有可选属性的接口与普通的接口定义差不多

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!