首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >axios的封装、代理转发、数据mock

axios的封装、代理转发、数据mock

作者头像
Ewall
发布2020-04-02 15:44:57
8820
发布2020-04-02 15:44:57
举报
文章被收录于专栏:vue学习vue学习

引入下axios,然后对axios做下基本的封装。然后就是mock数据的方式说一下,以及在项目中使用的mock方式。

1、axios封装

  • axios是什么就不说了吧,你应该以及很熟了,就直接安装吧。
$ npm install axios --save
  • 然后我们简单的在src/utils/request.js中简单的进行了一下axios封装
  • 对于环境的不同判断,比如开发环境、灰度环境、线上环境等等在@vue/cli3.x中通过新建一个.env.[xxx]的文件来维护-->环境变量和模式

2、数据mock

  • 数据mock我们使用yapi这个接口平台来管理,这样的话既可以很好的维护一封api文档,又可以进行数据的mock,这是我们这个项目的的接口文档:vue-mall
  • 你也可以使用mockjsesaymock之类的,其实都差不多,yapi还是很好用的,一些基础的用法文档都有讲,在项目中我用高级mock的比较多,反正都是写js也可以用mockjs的语法,还是挺方便的。

2、代理转发

  • 其实代理转发就是配置下webpack的devServer,详见webpack从0到1-devServer初探
  • 而在vue-cli3.x的脚手架生成了项目中,因为隐藏了webpack的配置文件,所以新建一个vue.config.js,然后在所提供的config配置文件修改下就行,原理还是一样的。
const mockUrl = 'http://yapi.demo.qunar.com/mock/17982'

module.exports = {
  // ...
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/dev-api': {
        target: mockUrl,
        pathRewrite: { '^/dev-api': '' },
        secure: false,
        changeOrigin: true
      }
    }
  },
  // ...
}

3、小结

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、axios封装
  • 2、数据mock
  • 2、代理转发
  • 3、小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档