vue-resource&axios

時間 2019-11-30

標籤 vue resource&axios resource axios 简体版

原文原文鏈接

Resource插件簡介javascript

Vue.js的插件提供了使用XMLHttpRequest或JSONP 進行Web請求和處理響應的服務html

單來講，vue-resource就像jQuery裏的$.ajax，用來進行數據交互vue

Vue-resource的特色java

1.體積小 node

vue-resource很是小巧，在壓縮之後只有大約12KB，服務端啓用gzip壓縮後只有4.5KB大小，這遠比jQuery的體積要小得多。ios

2.支持主流瀏覽器ajax

和Vue.js同樣，vue-resour　　ce除了不支持IE 9如下的瀏覽器，其餘主流的瀏覽器都支持。vue-router

3.支持Promise API和URI Templates(瞭解)npm

Promise是ES6的特性，Promise的中文含義爲「先知」，Promise對象用於異步計算。json

URI Templates表示URI模板，有些相似於ASP.NET MVC的路由模板。

4.支持攔截器

攔截器是全局的，攔截器能夠在請求發送前和發送請求後作一些處理。

Vue-ressource的安裝



基本使用
1.基於全局Vue對象使用http
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>

< script  src = "https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js" > </ script >


2.在一個Vue實例內使用$http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);



選項options
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

url:發送請求的URL
body:做爲請求主體發送的數據
headers:標題對象做爲HTTP請求表頭發送
params:做爲url參數發送的參數對象


$http方式數據請求
get

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
    </head>

    <body>
        <div id="app">
            <button v-on:click="sendGet()">發送get請求</button>
        </div>
    </body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            sendGet: function() {
                //這裏的this指代的是   vm對象
                var url = "http://127.0.0.1:3000/login?username=admin&password=123";
                this.$http.get(url).then(function(res) {
                    console.log(res.data)
                },function(err){
                    console.log(err)
                })
            }
        }
    })
</script>

　　post

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
    </head>

    <body>
        <div id="app">
            <button v-on:click="sendPost()">發送post請求</button>
        </div>
    </body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            sendPost: function() {
                //這裏的this指代的是   vm對象
                var url = "http://127.0.0.1:3000/postLogin";
                /**
                 * vue的post參數:若是是普通的post請求,最後一個就是{emulateJSON:true}
                 * 
                 * 參數一:url
                 * 
                 * 參數二:data-要傳遞的數據-對象的形式
                 * 
                 * 參數三:若是是普通的post請求,最後一個就是{emulateJSON:true}
                 * 
                 * */
                this.$http.post(url, {
                    username: 'lisi',
                    password: 'lisi'
                }, {
                    emulateJSON: true
                }).then(function(res) {
                    console.log(res.data)
                })
            }
        }
    })
</script>

　　jsonp

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
    </head>

    <body>
        <div id="app">
            <button v-on:click="sendPost()">發送post請求</button>
        </div>
    </body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            sendPost: function() {
                //這裏的this指代的是   vm對象
                var url = "http://127.0.0.1:3000/postLogin";
                /**
                 * vue的post參數:若是是普通的post請求,最後一個就是{emulateJSON:true}
                 * 
                 * 參數一:url
                 * 
                 * 參數二:data-要傳遞的數據-對象的形式
                 * 
                 * 參數三:若是是普通的post請求,最後一個就是{emulateJSON:true}
                 * 
                 * */
                this.$http.post(url, {
                    username: 'lisi',
                    password: 'lisi'
                }, {
                    emulateJSON: true
                }).then(function(res) {
                    console.log(res.data)
                })
            }
        }
    })
</script>

axios具體用來作什麼



axios的基本使用&安裝

使用npm安裝並引入
從瀏覽器中建立XMLHttpRequests

讓HTTP從node.js的請求

支持Promise API

截取請求和響應

轉換請求和響應數據

取消請求

自動轉換JSON數據

客戶端支持防範XSRF


使用cdnnpm install axiso

<script src='https://unpkg.com/axios/dist/axios.min.js'> </script>

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。