[JavaScript知识库]vue cli Mock的使用

mock模拟接口，使用默认的devserve 完成，考虑到这边有后台提供的模拟数据，随不需要自己随机生成数据，如果说有需要自己随机生成数据，可以使用mockjs

写mock接口

1. 在src/目录下新建mock目录，存放所有的mock文件

2. 在src/mock/目录下新建home.js

3. home.js mock 文件内容

   /**
    * @desc 处理返回banner 数据
    * @param { object } request express 请求对象
    * @param { object } response express 响应对象
    * @returns { object } json 对象
    */
   const getAdverising = (request, response) => {
     const result = {
       "errorCode": 0,
       "errorMessage": "success",
       "data": { },
       "success": true
     }
   
     response.json(result)
   }
   
   
   /**
    * @desc 处理获取 数据
    * @param { object } request express 请求对象
    * @param { object } response express 响应对象
    * @returns { object } json 对象
    */
    const getProductList = (request, response) => {
      console.log('request', request)
     let list = []
   
     let result = {
       "errorCode": 0,
       "errorMessage": "success",
       "data": {
         "product_list": list,
         "page_info": {
           "page_size": 10,
           "index": 1,
           "has_more": true,
           "count": 10
         }
       },
       "success": true
     }
     response.json(result)
   }
   // home Mock api
   const HomeMockApi = (app) => {
     app.post('/mock/adverising/getAdvertisingList', getAdverising)
     app.post('/mock/product/getProductLisgt', getProductList)
   }
   
   
   module.exports = HomeMockApi
   
   

4. 在src/ 目录下新建vue.config.js文件，配置devsever

   // 导入mock文件
   const HomeMockApi = require('./src/mock/home')
   
   module.exports = {
     devServer: {
       before(app, /*server, compiler */) {
         // 首页相关mock接口 注入
         HomeMockApi(app)
       }
     }
     
   // 注意：所有的mock文件必须通过require引入，这里的加载是通过node引入的，所有es6的import不可用
   

axios 封装

1. 安装axios

   npm i axios -s

   or

   yarn add axios

2. 在 src/utils/ 目录下新建 request.js

3. 在src/urils 新建config.js文件，并将常用变量名抽离放在此处

   export const REJIECTURL = 'REJIECTURL' // 重定向url key
   export const TOKENKEY = 'TOKENKEY' // token key
   export const USERINFO = 'USERINFO' // 用户信息 localstoragekey
   

4. axios 封装

   import axios from 'axios'
   import { Toast } from 'vant' // 引入Toast组件，用于错误提示
   import * as sysConfig from './config'
   
   const timeout = 60000 // 超时时间 默认1分钟
   // 设置默认请求url
   // 这里如果别的地方也会用到改变量，就把他配置到 src/config.js 中去
   const baseURL = 'http://localhost:8080' 
   let request = axios.create({
     timeout,
     baseURL
   })
   // 添加token
   const addToken = config => {
     let token = localStorage.getItem(sysConfig.TOKENKEY)
     // 添加token值请求头
     config.headers.Authorization = `Bearer ${token}`
     return config
   }
   // 添加公共参数
   const addParams = config => {
     let userId = 'userId' // 用户id
     let deviceId = 'h5' // 设备类型
     // 公用参数对象
     let params = {
       userId,
       deviceId
     }
   
     let key = config.method == 'post' ? 'data' : 'params'
     // 参数拼接
     config[key] = {
       ...config[key],
       ...params
     }
     
     return config
   }
   // 请求前的处理
   request.interceptors.request.use(config => {
     return Promise.resolve(config)
     .then(addToken)
     .then(addParams)
   })
   /**
    * @desc 检测请求状态
    * @param {*} response 
    * @returns 
    */
   const checkNetWorkStatus = response => {
     console.log('response', response)
     let {
       status,
       message
     } = response
     const errorCodes = [404, 403, 500, 502, 405]
     // 请求结果错误 提示用户
     if (errorCodes.includes(status)) {
       Toast({
         type: 'fail',
         message
       })
     }
     
     // 
     return response
   }
   
   // 清除登录信息
   const clearLoginInfo = () => {
     // 需要清理的缓存的key
     const keys = [
       sysConfig.TOKENKEY,
       'userId'
     ]
     // 遍历清除缓存的用户信息
     keys.map(key => localStorage.removeItem(key))
   }
   // 检测请求数据
   const checkCode = response => {
     let { errorCode, errorMessage } = response.data
     // 检查请求状态是否正常
     if (errorCode !== 0) {
       Toast({
         type: 'fail',
         message: errorMessage
       })
     }
     // 登录信息失效，需要重新登录
     let codes = [401, 403]
     // 登录 失效检测
     if (codes.includes(errorCode)) {
       clearLoginInfo()
       // 保存当前页面路由 用户登录后使用
       sessionStorage.setItem(sysConfig.REJIECTURL, location.href)
       // 重定向至登录页面 
       // router.push('/login')
     }
     return response
   }
   // 响应处理
   request.interceptors.response.use(response => {
     return Promise.resolve(response)
       .then(checkNetWorkStatus)
       .then(checkCode)
       .then(response => response.data)
   })
   
   // 导出 axios 实例
   export default request