温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么使用vue3 axios实现数据渲染

发布时间:2022-08-09 17:38:01 来源:亿速云 阅读:972 作者:iii 栏目:编程语言

这篇“怎么使用vue3 axios实现数据渲染”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用vue3 axios实现数据渲染”文章吧。

1、axios的作用是什么呢?

axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。

2、项目安装axios及其他环境

打开cmd 进入项目根目录(src同级目录) ,输入命令    npm install axios

3、新建axios.js     内容复制以下

怎么使用vue3 axios实现数据渲染

axios.js

import axios from "axios";
import qs from "qs";

// axios.defaults.baseURL = ''  //正式
axios.defaults.baseURL = 'http://localhost:8099' //测试

//post请求头
axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;

axios.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

axios.interceptors.response.use(
    response => {
        if (response.status == 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        alert(`异常请求:${JSON.stringify(error.message)}`)
    }
);
export default {
    post(url, data) {
        return new Promise((resolve, reject) => {

            axios({
                method: 'post',
                url,
                data: qs.stringify(data),
            })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                });
        })
    },

    get(url, data) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'get',
                url,
                params: data,
            })
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
};

4、直接在vue页面引用,axios.get或者.post方法

(vue2需要在main.js中挂载全局,vue3每次引用都需要  import,感觉有些臃肿)。

<template>
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>图书名称</td>
                <td>作者</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.author}}</td>
            </tr>
        </table>
        请求状态码:{{code}},请求状态:{{msg}}
    </div>
</template>
<script>
    import axios from '../js/axios';
 
    export default {
        name: "Book",
        data() {
            return {
                code: "",
                msg: "",
                books: [],
            }
        },
        created() {   //生命周期函数(或者 mounted 函数)调用的方法才能运行
            this.getShops();
        },
        methods: {
            getShops: function () {
                const vm = this;
                axios.get("/book/findAll", {
                    // id: 1
                }).then(function (response) {
                    console.log(response.data);
                    let results = response.data || [];
                    let code = response.code;
                    let msg = response.msg;
                    if (results && results.length > 0) {
                        // 获取搜索到的商品
                        vm.code = code;
                        vm.msg = msg;
                        vm.books = results;
                    }
                }).catch(function (error) {
                    console.log(error);
                    vm.code = 0;
                    vm.msg = error;
                    vm.books = [];
                })
            }
        }
    }
</script>

展示运行效果

后端接口:

怎么使用vue3 axios实现数据渲染

前端展示:

怎么使用vue3 axios实现数据渲染

5、踩坑记录

问题1:vue3 axios Error: Network Error

跨域请求问题,我是在后端拦截器类中处理的 ,重写 addCorsMappings 方法

   //跨域问题
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowedOriginPatterns("*")
                .allowCredentials(true);
    }

问题2:Cannot set properties of undefined (setting 'books')

或者ReferenceError: books is not defined

不能直接给变量赋值,需要通过  methods 方法中 const vm = this; 获取变量赋值;

vue 请求接口代码需要放置methods,且在created()或者mounted()周期函数中调用该方法。

created() {   //生命周期函数(或者 mounted 函数)调用的方法才能运行
    this.getShops();
},
methods: {
    getShops: function () {
    const vm = this;   //传获取的结果 给页面
    }
}

问题3:Uncaught ReferenceError: Vue is not defined

或者Cannot read properties of undefined (reading 'get')

vue3不是通过Vue对象挂载,后面我每个页面直接引用了axios(目前vue3好像只有这种方式)

怎么使用vue3 axios实现数据渲染

以上就是关于“怎么使用vue3 axios实现数据渲染”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI