vue2 mock本地模拟 Axios Failed to load resource: the server responded with a status of 404 (Not Found)

小半 • 2023年2月14日下午12:03 • 技术随笔 • 阅读 163

用mockjs模拟数据，axios发送get请求时出错

：Failed to load resource: the server responded with a status of 404 (Not Found)

代码逻辑如下：

先完成模拟axios的基本配置、请求，响应拦截器，mockAjax.js

//引入axios 进行二次封装:
import axios from 'axios'
//每次发送请求，增加进度条显示
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

const requests = axios.create({
    //配置基本不变,路径带有api：  /api/list/phone, 只要写/list/phone即可
    baseURL: '/mock', //注意大小写
    //请求超时值
    timeout: 5000,
})

//请求拦截器
requests.interceptors.request.use((config) => {
    //请求头:headers
    //进度条开始显示
    nprogress.start();
    return config;
})

//响应拦截器
requests.interceptors.response.use((res) => {
    //res默认data，返回成功的拦截
    nprogress.done(); //进度条结束
    return res;
}, err => {
    //响应失败的回调函数
    nprogress.done();
    return err;
})
console.log(requests)
export default requests;

配置请求api： mockServe.js

import Mock from 'mockjs'

//模拟数据引入
import floor from './floor.json'


Mock.mock("/mock/banner", {code: 200, data: {b: "banner"}})
Mock.mock("/mock/floor", {code: 200, data: floor})

调用：vuex配置三连环（action,mutation,state）。 store目录：home模块下home/index.js

const acitons={

  //添加action
    getBannerList(context) {
        reqGetBannerList().then(
            response => {
                console.log(response)
                if (response.status === 200) {
                    context.commit("setBannerList", response.data)
                }
            },
            error => {
                console.log('获取banner error', error)
            })
    },
}

const mutations = {
    setBannerList(state, value) {
        state.bannerList = value
    }
}

const state = {
    count: 1,
    categoryList: {},
    bannerList: []

}

const homeStore = {
    namespaced: true,
    state: state,
    mutations: mutations,
    actions: actions,
    getters: getters
}


export default homeStore;

配置vuex模块化： store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import homeStore from "@/store/home";
import searchStore from "@/store/search";
Vue.use(Vuex);
//优化： 当项目功能模块多，仓库需要保存的数据量大，为了方便管理与修改，可以将vuex仓库数据模块化。每个模块结构与大的vux相同，包含这几个对象：state,mutations,actions,getters


//对外暴露
export default new Vuex.Store({
    modules: {
        homeStore: homeStore,
    }
})

vue模版页面.vue调用vuex派发触发http接口调用：

mounted(){
    //vuex派发action: 发送Ajax请求，拿到轮播图数据
    this.$store.dispatch('homeStore/getBannerList');
  }

分析：

查看了下请求头：http://localhost:8080/mock/banner

路径上也没有什么问题。

最后再对了一下流程发送mockServe.js完全没有调用，必须要在程序入口执行一次。

解决：

在main.js，这个程序主入口文件，调用一次mockServe.js:

import mockServer from './mock/mockServer'

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
import TypeNav from "@/pages/Home/TypeNav";
import store from "@/store";
import 'animate.css'
import mockServer from './mock/mockServer'