vue-axios调mock模拟数据的接口

最新推荐文章于 2025-06-23 09:52:24 发布

原创最新推荐文章于 2025-06-23 09:52:24 发布 · 488 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍如何利用MockJS生成模拟数据，并通过Axios进行HTTP请求封装，实现在前端项目中对接口的模拟调用。文章详细展示了从安装依赖、配置MockJS、封装Axios方法到在页面中调用接口的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.mock模拟数据
安装mock依赖

npm i mock -D

（src下新建mock/mock.js文件）

// 导入mock:
import Mock from 'mockjs'
// 模拟数据
Mock.mock('/api/city/list', () => {
    return Mock.mock({
        code: '0000',
        "data|1-10": [{
            "id": "@guid()",
            "city": "@city",
        }],
        success: true,
        message: '成功',
    })
})

在这里插入图片描述
2.（src下新建api/http/http.js和user/user.js）
（src下新建mock/mock.js文件）
2-1
http.js中放入axios封装的各种方法如下所示：
先安装axios依赖：npm i axios -S

/**
 * Created by Rehan on 2019/08/01
 */
// 引用axios
import axios from 'axios'

axios.defaults.timeout = 5000;
axios.default.baseURL = '';

//http request 拦截器
axios.interceptors.request.use(
    config => {
        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
        config.data = JSON.stringify(config.data);
        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
        // if(token){
        //   config.params = {'token':token}
        // }
        return config;
    },
    error => {
        return Promise.reject(err);
    }
);


//http response 拦截器
axios.interceptors.response.use(
    response => {
        if (response.data.errCode == 2) {
            router.push({
                path: "/login",
                querry: { redirect: router.currentRoute.fullPath }//从哪个页面跳转
            })
        }
        return response;
    },
    error => {
        return Promise.reject(error)
    }
)

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function fetchGet(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function fetchPost(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
export function fetchPatch(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.patch(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function fetchPut(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

2-2
user.js中调取mock模拟数据的接口

// 引用http.js封装方法
import {fetchGet} from '../http/http'
// 调取mock生成的接口
export const cityList = function(params) {
    return fetchGet('/api/city/list', params)
}

在这里插入图片描述
3.在需要此接口的页面渲染数据（我在src下新建views/index.vue,在index.vue文件渲染的）

<script>
// 引入user
import {cityList} from '@/api/user/user'
export default {
    data() {
        return {
        // 初始化数据
            allCityList:[]
        }
    },
    methods: {
        getCityList(){
          cityList({}).then(res =>{
             if(res.code == '0000' && res.success) {
              // 给data的allCityList 赋值接口数据
                this.allCityList = res.data
                // 打印的为接口数据
                console.log('allCityList',this.allCityList)
            }
          })
        }
    },
    mounted() {
       // 页面挂在完毕后调用函数
        this.getCityList()
    }
}
</script>

<template>
  <div class="move-forward">
    <ul>
    // 将接口数据遍历出来，渲染到页面
      <li v-for="(item,index) of allCityList" :key="index">{{item.city}}</li>
    </ul>
  </div>
</template>

4.成功调取接口数据
因为是mock随机生成数据所以每次刷新都不一样
在这里插入图片描述