vue axios封装 mock

在src 新建

 

 config.js

let host_url = ''

if (process.env.NODE_ENV === 'development') {

    // 开发环境

    host_url = 'https://api.luban.one'

} else {

    // 生产环境

    host_url = 'https://api.luban.one'

}

export {

    host_url,

}

 

 

request.js

 

import axios from 'axios'

import router from '../router/index'

/**

 * 跳转登录页面

 */

const toLogin = () => {

    router.replace({

        path: '/login',

        query: {

            redirect: router.currentRoute.fullPath

        }

    })

}

/**

 * 请求失败后的错误统一处理

 */

const errHandle = (status, other) => {

    // 状态码判断

    switch (status) {

        // 401 未登陆，跳转登录页面

        case 401:

            toLogin()

            break

        // 403 token过期

        // 清楚token并跳转登录页面

        case 403:

            alert('登录过期，请重新登录')

            localStorage.removeItem('token')

            // 清除store 中的登录状态

            setTimeout(() => {

                toLogin()

            }, 1000)

            break

        // 404

        case 404:

            alert('请求的资源不存在')

            break

        default:

            alert(other)

    }

}

// 创建axios实例

var instance = axios.create({ timeout: 1000 * 12 })

// 设置post请求头

// instance.defaults.headers.post['Content-type'] = 'application/x-www-from-urlencoded'

/**

 * 请求拦截器

 */

instance.interceptors.request.use(

    config => {

        // const token = store.state.token

        const token = '8f8r8gh8a8h7a7g8w'

        token && (config.headers.Authorization = token)

        return config

    },

    err => Promise.error(err)

)

/**

 * 相应拦截器

 */

instance.interceptors.response.use(

    // 请求成功

    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),

    // 请求失败

    error => {

        const { response } = error

        if (response) {

            // 请求已发出，但不在2xx范围内

            errHandle(response.status, response.data.message)

            return Promise.reject(response)

        } else {

            // 处理断网情况

            if (!window.navigator.onLine) {

                store.commit('changeNetwork', false)

            } else {

                return Promise.reject(error)

            }

        }

    }

)

export default instance

 

 

 

根目录新建

 

index.js

// 在这里可以做一些通用的配置

const Mock = require("mockjs");

// 设置所有ajax请求的超时时间，模拟网络传输耗时

Mock.setup({

  timeout: 0 - 300,

});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件

const files = require.context(".", true, /\.js$/);

files.keys().forEach(key => {

  if (key === "./index.js") return;

  configArray = configArray.concat(files(key).default);

});

// 注册所有的mock服务

configArray.forEach(item => {

  for (let [path, target] of Object.entries(item)) {

    let protocol = path.split("|");

    Mock.mock(new RegExp("^" + protocol[1]), protocol[0], target);

  }

});

 

test.js

// let demoList = {

//   status: 200,

//   message: "success",

//   data: {

//     total: 100,

//     "array|1-10": [

//       {

//         "name|+1": ["Hello", "Mock.js", "!"]

//       }

//     ]

//   }

// };

// export default {

//   "get|/parameter/query": option => {

//     return {

//       status: 200,

//       message: "success",

//       data: demoList

//     };

//   }

// };

let demoList = {

  status: 200,

  message: "success",

  data: {

    total: 100,

    "rows|10": [

      {

        id: "@guid",

        name: "@cname",

        "age|20-30": 23,

        "job|1": ["111", "222", "333", "444"]

      }

    ]

  }

};

export default {

  "get|/parameter/query": demoList

};

 

 

 src新建api > mock.js

 

mock.js

import { host_url } from "@/config/config";

import axios from "@/config/request";

import Qs from "qs";

const mock = {

  testList(params) {

    return axios.get(`/parameter/query`, {

      params

    });

  }

};

export default mock;

 

index.js

 

/**

 * api 接口统一管理

 */

// mock

import mock from "./mock/mock";

// 首页 接口

import home from './home/home'

// 登录页 接口

import login from './login/login'

// 财务管理 接口

import finance from './finance/finance'

// 导出接口

export default {

    mock,

    home,

    login,

    finance

}

 

在页面中使用

testMock() {
this.$api.mock.testList({id: 1}).then(res => {
console.log('--',res);
});
}

 

api login.js

 

/**

 * 登录模块接口列表

 */

import { host_url } from '@/config/config'

import axios from '@/config/request'

import Qs from 'qs'

const login = {

    // POST获取 "首页"=>"获取验证码"

    login(data) {

        return axios.post(`${host_url}/admin/system/employee/check`, Qs.stringify(data, { arrayFormat: 'repeat' }))

    },

    // POST获取 "首页"=>"获取验证码后登录"

    signIn(data) {

        return axios.post(`${host_url}/admin/system/employee/sign/in`, Qs.stringify(data, { arrayFormat: 'repeat' }))

    }

}

export default login