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裏面進行封裝。
學習一點東西后，要及時的進行記錄，這樣對自己也是一種熟悉和提升，對於自己不懂的地方能及時的發現。