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

2020-04-01 1,828 阅读1分钟

引入下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
你也可以使用mockjs、esaymock之类的，其实都差不多，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、小结

总而言之，vue的脚手架升级了以后，开发配置一个项目还是变得更简单了。
欢迎大家围观项目中的一些实际的用法。
对于老版本的脚手架配置方式：www.jianshu.com/p/896f8127f…

友情链接：