1、axios的作用是什么呢？
axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。【相关推荐：vue.js视频教程】
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好像只有这种方式）
6、vue3入门总结
入门前一定要先认真阅读vue官网（https://v3.cn.vuejs.org/），了解常见函数及一些基础的用法。在开发中才能减少踩坑！！！
以上就是vue3 axios的使用介绍及数据渲染的详细内容。