您的当前位置:首页Vue Cli 3.0中使用axios请求本地JSON数据

Vue Cli 3.0中使用axios请求本地JSON数据

2024-12-11 来源:哗拓教育

网上方法千千万,由己验明知真假。———— 只灯片笺(简书ID)

本文主要内容:
1. Vue Cli 3.0使用axios请求本地JSON数据,出现404错误;
2. 能请求到数据的方法①;
3. 能请求到数据的方法②;
1. Vue Cli 3.0 使用 axios 请求 本地JSON 数据,出现 404 错误
错误内容如下:
Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:59)
404错误.png
2. 能请求到数据的方法①
// 引入json文件;
const data = require('./public/test');
......
......
devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
        },
        before: app => {
            /* /test/a  是后面请求本地数据的url填写的内容,类似于请求接口;
             * data这个自己设定的变量,内定了json文件的路径;
             * 在api里面请求数据的data的时候,会自动帮忙转发到localhost:8080/test/a
             */
            app.get('/test/a', (req, res) => {
                res.json(data);
            })
        }
    }
methods: {
            getData1() {
                axios1.get(
                    'http://localhost:8080/test/a'
                ).then((response) => {
                    // 200响应
                    // console.log(3333);
                    // console.log(response);
                }, (err) => {
                    // 500响应
                    console.log(4444);
                    console.log(err);
                })
            },
        },
        created() {
            this.getData1();
        },
第一种本地json请求方式.png 打印数据.png json数据.png
3. 能请求到数据的方法②
因为cli3.0生成的项目,静态文件变成了public文件。所以,本地的json放在此目录下或者此静态资源目录public的 js, css, img, fonts下即可。请求的时候,如果还有目录级,则加上,没有则空着不写;
目录结构.png
// 此处以ttt.json为例。如果是test.json则url为/test.json;
methods: {
            getData() {
                this.$http({
                    method: 'GET',
                    url: '/js/ttt.json',
                }).then((response) => {
                    // 200响应
                    // console.log(1111);
                    // console.log(response);
                }, (err) => {
                    // 500响应
                    console.log(2222);
                    console.log(err);
                })
            },
        },
        created() {
            this.getData();
        },
第二种本地json请求方式.png 打印数据.png json数据.png
显示全文