Introduction to the use of vue3 axios and data rendering-Vue.js-php.cn

Introduction to the use of vue3 axios and data rendering

藏色散人

Release： 2022-08-09 16:14:18

forward

3931 people have browsed it

This article will introduce how to use axios to call the interface and render the obtained data. I hope it will be helpful to friends in need!

1. What is the function of axios?

axios is mainly used to initiate requests to the background, and there are more controllable functions in the request. [Related recommendations: vue.js video tutorial]

2. Project installationaxios and other environments

Open cmd Enter the project root directory (directory at the same level as src) and enter the command npm install axios

3. Create a new axios.js Content Copy the following

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)
                })
        })
    }
};

Copy after login

4. Quote directly on the vue page, axios.get or .postmethod

(vue2 needs to mount the global in main.js, vue3 requires import every time it is referenced, which feels a bit bloated).

<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 &#39;../js/axios&#39;;
 
    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>

Copy after login

Display the running effect

Backend interface:

## Front-end display:

5. Pitfall records

Question 1: vue3 axios Error: Network Error

Cross-domain request problem, I handle it in the back-end interceptor class Yes, override the addCorsMappings method

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

Copy after login

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

or ReferenceError: books is not defined

Cannot be given directly to variables Assignment, you need to pass the methods method

const vm = this; Get the variable assignment;

vue request interface code needs to place methods, and call them in the created() or mounted() periodic function method.

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

Copy after login

Question 3: Uncaught ReferenceError: Vue is not defined

or Cannot read properties of undefined (reading 'get')

vue3 is not mounted through the Vue object, later Each of my pages directly references axios (currently vue3 seems to only have this method)

6. Summary of getting started with vue3

Getting started Before doing this, you must carefully read the vue official website (https://v3.cn.vuejs.org/) to understand common functions and some basic usage. Only during development can you reduce pitfalls! ! !

The above is the detailed content of Introduction to the use of vue3 axios and data rendering. For more information, please follow other related articles on the PHP Chinese website!