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 または .postmethod

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

実行中のエフェクトの表示

バックエンド インターフェイス:

## フロントエンド ディスプレイ:

5. 落とし穴の記録

質問 1: vue3 axios エラー: ネットワーク エラー

クロスドメイン リクエストの問題、バックエンド インターセプターで処理しますclass はい、addCorsMappings メソッドをオーバーライドします

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

質問 2: 未定義 ('books' の設定) のプロパティを設定できません

または ReferenceError: Books が定義されていません

指定できません変数割り当てに直接メソッドを渡す必要があります。メソッド

const vm = this; 変数割り当てを取得;

vue リクエスト インターフェイス コードでメソッドを配置し、作成されたメソッドでそれらを呼び出す必要があります( ) または mount() 周期関数メソッド。

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

質問 3: キャッチされない参照エラー: Vue が定義されていません

または未定義のプロパティを読み取れません (「get」を読み取っています)

vue3 は Vue オブジェクトを通じてマウントされていません。後で 私の各ページは axios を直接参照します (現在 vue3 にはこのメソッドしかないようです)

6. vue3 の使用開始の概要

はじめに これを行う前に、vue 公式 Web サイト (https://v3.cn.vuejs.org/) をよく読んで、一般的な機能といくつかの基本的な使用法を理解する必要があります。開発中にのみ落とし穴を減らすことができます。 ！ ！

以上がvue3 axios の使用法とデータ レンダリングの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。