vue-cli模拟数据以及简单的axios封装

vue-cli模拟数据以及简单的axios封装

对于模拟数据以及封装请求，都是老生常谈了，但是总总会忘记，要去google，很麻烦，现在在这里做做记录，方便自己查阅。
第一种是mock.js，模拟数据。
第二种是easy-mock，模拟数据。
今天讲的是第三种模拟方法。通过vue-server,模拟数据。
通过vue-cli安装的文件目录想天有一个vue.config.js文件。

第一步：在这个文件里引用我们自己写的json数据文件，将需要用的数据，通过变量保存起来，如下：

const appData = require('./data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

第二步：然后在module.exports里面定义一个devServer如下：

module.exports = {
     
  ......
  devServer: {
     
    // 模拟数据通过地址 获得json数据
    before(app) {
     
      app.get('/api/seller', function (req, res) {
     
        res.json({
     
          errno: 0,
          data: seller
        })
      })
      app.get('/api/goods', function (req, res) {
     
        res.json({
     
          errno: 0,
          data: goods
        })
      })
      app.get('/api/ratings', function (req, res) {
     
        res.json({
     
          errno: 0,
          data: ratings
        })
      })
    }
  },

此时我们可以通过http://localhost:8080/api/seller直接拿到我们的数据。

这个时候我们需要在文件中用axios请求，获取数据。
现在src文件夹里新建一个api文件夹，用作封装axios的方法，看axios文档用法。

第一步,安装，加–save就是为了直接在page.json中添加好axios的配置。

npm instll i axios --save

第二步，引用

import axios from 'axios'

第三部，调用

axios.get('/user', {
     
   params: {
     
     ID: 12345
   }
 }).then(function (response) {
     
   console.log(response);
 }).catch(function (error) {
     
   console.log(error);
 });

好了，现在我们可以进行简单的封装了，我们先在api文件夹中，新建一个helper.js文件，在这里面封装。

import axios from 'axios'

const ERR_OK = 0

export function get(url) {
     
  return function (params) {
     
    return axios.get(url,{
     
      params
    }).then((res) => {
     
      const {
     errno, data} = res.data
      if (errno === ERR_OK) {
     
        return data
      }
    }).catch(()=>{
     
    })
  }
}

然后在api文件夹中，新建一个index.js
首先引入helper.js中的get

import {
      get } from './helpers'

定义变量，保存请求api后的函数，最后导出，用于最后的请求。

const getSeller = get('/api/seller')
export {
     
  getSeller
}

现在我们在app.vue中的created生命周期中，发送axios请求。
先引入

import {
      getSeller } from 'api'

这里有个问题，引入api因为不在同个目录下，这里应该用相对路径，但是我们可以在vue.config.js中定义一下，首先引入path，然后通过resolve函数拼接路径，最后通过chainWebpack配置api路径。

const path = require('path')

function resolve(dir) {
     
  return path.join(__dirname, dir)
}
module.exports = {
     
	......
	chainWebpack(config) {
     
	   config.resolve.alias
	     .set('api', resolve('src/api'))
	}
}

继续axios，在create生命周期中，因为getSeller返回的是promise函数，所有我们通过如下代码就可以，获得数据。

	// this.goods是data里面定义的。
     getGoods().then((goods) => {
     
       this.goods = goods
     })

这样我们就能获得我们自己json数据里面的数据，同时对axios进行了封装，对于以后需要的请求都统一放在api/index.js里面，方便维护。
对于以后需要进行返回的错误码之类的状态都在helper.js里面进行封装。
学习一点东西后，要及时的进行记录，这样对自己也是一种熟悉和提升，对于自己不懂的地方能及时的发现。