阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

vue项目用到的mock数据接口的两种方式

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1010/116959.html

1.使用devServer.before进行数据mock

//通过配置devServer.before选项,设置url访问路径及response响应数据,进行mock数据
const { data } = require('./data.json')// 引入json数据对象//vue.config.js配置文件中进行Vue CLI的配置module.exports = { //... devServer: { before: function(app, server) { app.get('/api/data', function(req, res) { res.json({ data: data, errno: 0 }); }); } }};
import axios from 'axios'const ERRNO = 0//通过函数柯力化,接收url作为参数,以返回新的函数接收额外的参数作为axios配置项function get (url) {  return function (params) {    return axios.get(url, {      params    }).then((res) => {      const { errno, data } = res.data      if (errno === ERRNO) {        return data      }    }).catch((e) => {    })  }}const getData = get('api/data')getSeller().then(res => {  console.log(res)})

2.使用Mock.js进行数据mock

使用Mock.mock(),根据数据模板生成模拟数据

import Mock from 'mockjs'import data from './bookHome'//导入存放模拟json数据的js文件Mock.mock(/\/api\/data/, 'get', home)//表示需要拦截的 URL,可以是 URL 字符串或 URL 正则
//表示需要拦截的 Ajax 请求类型
例如 GET、POST、PUT、DELETE 等
//表示数据模板,可以是对象或字符串
例如 { 'data|1-10':[{}] }、'@EMAIL'
/* axios获取mock数据 */import axios from 'axios'export function getData() {  return axios({    method: 'get',    url: `${process.env.VUE_APP_BOOK_URL}/api/data`    //通过环境指定的默认地址设定接口url,方便后续调用  })}  //接口方法返回promise对象,最终获取mock数据  getData().then(response => {    if (response && response.status === 200) {      const data = response.data      console.log(data)    }  })

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!