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. axios.get 또는 .post Method

(vue2는 main.js에 전역 시스템을 마운트해야 하고, vue3은 참조될 때마다 가져와야 하므로 약간 부풀어오르는 느낌입니다).

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

运 디스플레이 작업 효과

백엔드 인터페이스:

질문 1: Vue3 Axios 오류: 네트워크 오류

도메인 간 요청 문제입니다. 백엔드 인터셉터 클래스에서 addCorsMappings 메서드를 재정의하여 처리했습니다

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

질문 2: 정의되지 않음('책' 설정)

속성을 설정할 수 없습니다. 또는 ReferenceError: 책이 정의되지 않았습니다

Cannot 변수에 직접 값을 할당하려면 메소드 메소드에서 const vm = this

를 통해 변수 할당을 받아야 합니다.

vue 요청 인터페이스 코드는 메소드를 배치하고 이 메소드를 생성() 또는 마운트에서 호출해야 합니다. ()주기적인 기능.

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

질문 3: 포착되지 않은 참조 오류: Vue가 정의되지 않았습니다

또는 정의되지 않은 속성을 읽을 수 없습니다('get' 읽기)🎜🎜vue3이 Vue 객체를 통해 마운트되지 않았습니다. 나중에 각 페이지에서 axios를 직접 참조했습니다(현재 vue3). 이 방법뿐인 것 같습니다)🎜🎜🎜🎜🎜🎜 6. vue3 시작 요약🎜🎜🎜시작하기 전에 반드시 vue 공식 웹사이트(https://v3.cn.vuejs.org/)를 주의 깊게 읽어보세요. 일반적인 기능과 몇 가지 기본 사용법을 이해합니다. 개발 중에만 함정을 줄일 수 있습니다! ! ! 🎜

위 내용은 vue3 axios 및 데이터 렌더링 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!