Introduction notes to Vue basics 10: Vue resource, Axios

Time:2021-9-13

Vue basic introduction notes 10

Get to know HTTP requests

  1. vue-resource
    • The root domain name Vue. Http. Option. Root = ‘URL’ of the global setting data request interface cannot use an absolute path or /, otherwise the root domain name will not be spliced
  2. axios
  3. Jsonp principle
    • Due to browser security restrictions, AJAX is not allowed to access data interfaces with different protocols, domain names and ports. The browser considers this behavior unsafe
    • You can dynamically create a script note in the form of pointing the SRC attribute of the script tag to the address of the data interface, because there is no cross domain problem with the script tag. This data acquisition method is called jsonp
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--  It must be placed after Vue and depends on Vue resource -- >
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div id="app">

        <button type="button" @click='httpGet' class="btn btn-default">get</button>
        <button type="button" @click='httpPost' class="btn btn-default">post</button>
        <button type="button" class="btn btn-default">button</button>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                //Get request
                httpGet() {
                    // this.$http.get('http://http://www.baidu.com').then( success => {
                    //     console.log(success)
                    // }, error => {
                    //     console.log(success)
                    // })

                    axios.get('http://www.baidu.com')
                        .then(function (response) {
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                        // axios.get('url').then(res=>{

                        // }).catch(error=>{

                        // })
                },
                httpPost() {
                    this.$http.post('http://www.baidu.com').then(success => {
                        console.log(success)
                    }, error => {
                        console.log(success)
                    })
                }
            }
        });
        Vue.config.devtools = true
    </script>
</body>

</html>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Purple smoke from sunshine censer

Recommended Today

Easily complete a distributed transaction TCC, nanny level tutorial with PHP

What is TCC? TCC is the abbreviation of try, confirm and cancel. It was first proposed by a paper entitled life beyond distributed transactions: an apostate’s opinion published by Pat helland in 2007. TCC composition TCC is divided into three stages Try phase: try to execute, complete all business checks (consistency), and reserve necessary business […]