这篇“怎么使用vue3 axios实现数据渲染”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用vue3 axios实现数据渲染”文章吧。
1、axios的作用是什么呢?
axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
2、项目安装axios及其他环境
打开cmd 进入项目根目录(src同级目录) ,输入命令 npm install axios
3、新建axios.js 内容复制以下
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>
展示运行效果
后端接口:
前端展示:
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实现数据渲染”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。