vue3 axios的使用介绍及数据渲染

本篇文章给大家介绍如何使用axios方式调用接口以及获取的数据渲染，希望对需要的朋友有所帮助！

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，感觉有些臃肿）。

展示运行效果

后端接口：

 前端展示：

小麦企业网站展示系统1.1

小麦企业网站展示系统介绍：一、安装使用将xiaomai.sql导入数据库二、后台登录后台帐号，密码默认都是admin,config.php 配置文件可根据自行需要修改，IP地址，数据库用户名，密码，及表名后台目录默认admin，支持自行任意修改目录名三、注意事项1 本源码完全免费，采用伪静态，减少不必要的源码重复，速度更快，支持二次开发。2、注明本程序编码为UTF8，如发生乱码，请注意修改编码3、

下载

 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/），了解常见函数及一些基础的用法。在开发中才能减少踩坑！！！