Introduction à l'utilisation de vue3 axios et au rendu des données

Cet article explique comment utiliser axios pour appeler l'interface et restituer les données obtenues. J'espère que cela sera utile aux amis dans le besoin !

1. Quelle est la fonction d'axios ?

axios est principalement utilisé pour lancer des requêtes en arrière-plan, et il y a des fonctions plus contrôlables dans la requête. [Recommandations associées : Tutoriel vidéo vue.js]

2. Installation du projet axios et autres environnements

Ouvrez cmd et entrez dans le répertoire racine du projet (répertoire de même niveau src), entrez la commande npm install axios

3. Créez un nouveau contenu axios.js Copiez ce qui suit

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. ios.get ou .post Method

(vue2 doit monter le système global dans main.js, vue3 doit l'importer à chaque fois qu'il est référencé, ce qui semble un peu gonflé).

<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>

运 Effet d'opération d'affichage

Interface back-end :

Question 1 : Erreur Vue3 Axios : erreur réseau

Problème de requête inter-domaines, je l'ai traité dans la classe d'intercepteur backend, en remplaçant la méthode addCorsMappings

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

Question 2 : Impossible de définir les propriétés d'undefined (paramètre 'books')

ou ReferenceError : les livres ne sont pas définis

Impossible attribuer des valeurs directement aux variables, vous devez obtenir l'affectation des variables via const vm = this ; dans la méthode des méthodes ;

vue le code de l'interface de requête doit placer les méthodes et appeler cette méthode dans le fichier créé() ou monté ; () fonction périodique.

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

Question 3 : Erreur de référence non détectée : Vue n'est pas définie

ou Impossible de lire les propriétés d'undéfini (lecture de 'get')

🎜vue3 n'est pas monté via l'objet Vue Plus tard, j'ai directement référencé axios sur chaque page (actuellement vue3. semble être seulement de cette façon)🎜🎜🎜🎜🎜🎜 6. Résumé de la prise en main de vue3🎜🎜🎜Assurez-vous de lire attentivement le site officiel de vue (https://v3.cn.vuejs.org/) avant de commencer pour comprendre les fonctions courantes et certaines bases d'utilisation. Ce n'est que pendant le développement que vous pourrez réduire les pièges ! ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!