vue封装axios mock模拟数据请求

新建 http.js文件  

import axios from 'axios'
//引入vant的UI框架
import {Toast} from 'vant';

//axios 统一配置
var instance = axios.create({
    baseURL: '/',
    timeout: 6000,
    headers:{"token":"12333"}
});

//axios 请求拦截器 默认每个请求都有loading加载框，不需要的话url后拼接#
instance.interceptors.request.use( config => {
    if(!config.url.includes("#")){
        Toast.loading({
            mask: true,
            duration:0,
            // loadingType: 'spinner',
            message: '加载中...'
        });
    }
    console.error("请求参数：" + JSON.stringify(config.data))
    return config;
}, function (error) {
    return Promise.reject(error);
});

// axios 响应拦截器
instance.interceptors.response.use(response => {
    Toast.clear()
    if (response.data.code == 0) return response
    else {
        Toast.fail(response.data.msg);
        return null
    }
}, function (error) {
    Toast.fail('404');
    return Promise.reject(error);
});

//get请求
function get(url) {
    return instance.get(url);
}

// post请求
function post(url, data) {
    return instance.post(url, data);
}
export default instance

main.js 引入

记得安装vant

import axios from 'axios'
// ...
import { Toast } from 'vant';
Vue.use(Toast);

import HTTP from './http'
Vue.prototype.$axios= axios

组件中使用：

import HTTP from '../http.js'

mounted () {

    get请求
    this.$axios.get("https://5c407abd2928860014e07025.mockapi.io/api/v1/records").then(res=>{
        //do something
        console.log(res)
    })

post请求
var params={data:"winter wang"}
    this.$axios.post("https://5c407abd2928860014e07025.mockapi.io/api/v1/records",params).then(res=>{
        console.log(res)
    })


//想单独处理异常的话使用catch捕获：

this.$axios.post(url,params).then(res=>{
      //do something
}).catch(error=>{
        //do something
 })

    }

}

mock数据：

当前数据：

地址：

​​https://5c407abd2928860014e07025.mockapi.io/api/v1/records​​