vue 基礎入門筆記 10:vue-resource、axios

September發表於2019-08-16
Vue筆記iOS

初識http請求

  1. vue-resource
    • 全域性設定資料請求介面的根域名 Vue.http.option.root = 'url' 每次請求時不能用絕對路徑，不能帶 / ,否則不會用根域名做拼接
  2. axios
  3. jsonp 原理
    • 由於瀏覽器安全限制，不允許ajax訪問協議不同，域名不同，埠不同的資料介面，瀏覽器認為這種行為不安全
    • 可以動態建立script便籤的形式，把script標籤的src屬性，指向資料介面的地址，因為script標籤不存在跨域問題，這種資料獲取方式叫做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>
    <!-- 必須放在vue之後，對vue依賴 vue-resource-->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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請求
                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>
本作品採用《CC 協議》，轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章