vue结合vue-resource实现ajax请求

2019-05-21 本文已影响0人瑟闻风倾

1. http协议及请求报文和响应报文

说明：浏览器和服务器间的数据交互需遵循http协议。
为什么要遵循http协议：浏览器和服务器都遵守同一种格式或规则，然后才能够相互解析实现数据交互。

1.1 http协议内容包括：

(1)http请求方式：get和post等
(2)http请求报文格式：请求报文行、请求报文头和请求报文体(post请求的参数)
(3)http响应报文格式：响应报文行、响应报文头和响应报文体
备注：报文头和报文体之间有一个固定空白行来分割。

请求报文和响应报文.png

1.2 http协议约定了：

(1)当浏览器请求服务器时

浏览器需遵守http请求方式：get和post等
浏览器需遵守http请求报文格式向服务器提交数据

(2)当服务器响应浏览器时

服务器需遵守http响应报文格式来响应浏览器

2. ajax

vue与后台api进行交互通常是利用vue-resource这个第三方包来实现的，本质上vue-resource是通过http来完成ajax请求响应的。

3. vue-resource

3.1 vue-resource资源地址

vue-resource的github地址，重点看vue-resource的http请求api。

vue-resource的http请求api.png

3.2 vue结合vue-resource的使用步骤

(1)直接下载vue-resource.js文件（建议先不用npm进行安装）

下载地址.png

说明：访问图中地址成功后，将代码复制到项目中新建的vue-resource151.js文件中。
(2)在项目的html页面中导入vue-resource151.js

<!-- 按序导入vue.js和vue-resource.js -->
<script type="text/javascript" src="../../first/vue1026.js"></script>
<script type="text/javascript" src="../vue-resource151.js"></script>

说明：在html页面通过script标签导入vue-resource151.js文件后，就会自动在vue对象实例上初始化$http。
备注：导入vue-resource.js之前要先下载并导入vue.js。
Vue官网
 Vue GitHub
Vue1下载地址
 Vue1.0 在线文档
 Vue2下载地址
 Vue2.0 在线文档
(3)使用vue-resource实现ajax请求

在全局Vue对象的写法

// global Vue object
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

在Vue对象中的写法

// in a Vue instance
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

备注：[]代表可选参数，body代表请求报文体的参数对象。
this.$http.post('请求url', [可选参数请求报问题对象，使用{}传参], [可选参数对象，使用{}传参]).then(成功回调函数, 失败回调函数);

3.3 vue结合vue-resource实现ajax请求

3.3.1 实现ajax的get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <!-- 按序导入vue.js和vue-resource.js -->
    <script type="text/javascript" src="../../first/vue1026.js"></script>
    <script type="text/javascript" src="../vue-resource151.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getData">get请求</button>
        {{obj | json}}
    </div>
</body>

<script> 
    var vue = new Vue({
        el:"#app",
        data:{
            obj:null
        },
        methods:{
            getData:function(){
                var url = "http://vueapi.ittun.com/api/getprodlist";
                this.$http.get(url)
                .then(function(response){
                    console.log(response.body);
                    this.obj= response.body;
                })

            }
        }
    });

</script>
</html>

3.3.2 实现ajax的post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../../first/vue1026.js"></script>
    <script type="text/javascript" src="../vue-resource151.js"></script>
</head>
<body>
    <div id="app">
        <button @click="postData">post提交数据</button>
    </div>
</body>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
        },
        methods:{
            postData:function(){
                var url = "http://vueapi.ittun.com/api/addProduct";
                //post请求中的第三个参数固定写为{emulateJSON:true}，否则服务器可能无法接受请求报问题中的参数值
                this.$http.post(url,{name:"栗子"},{emulateJSON:true})
                .then(function(response){
                    alert(response.body.message);
                })
            }
        }
    });

</script>
</html>

3.3.3 实现ajax的jsonp请求

说明：浏览器会阻止ajax的跨域请求，但浏览器具有同源策略的特性。
跨域：假如有两台服务器S1和S2，S1的域名为localhost:8087，S2的域名为vueapi.ittun.com。浏览器从S1中请求到一个index.html页面后返回到浏览器，浏览器获取到响应报文后解析所有数据，index.html有若有一个ajax请求，请求的是S2的api。请求完成后，浏览器判定index.html页面是来源于S1的域名的，但是在这个域名下面通过ajax请求了S2域名的api，浏览器会认为这是一种不安全的请求，从而进行阻止。
同源策略：通过script标签的src来进行请求，不管api中的url域名和当前页面所在域名是否相同，浏览器都是允许请求的。

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

所有ajax就设计了一种jsonp的形式来封装script脚本的src形式来请求数据后在解析数据。jsonp本质上不是一个真正的ajax请求，也就是说在浏览器监控时，它的type类型并不是xhr(异步对象)，而是一个script脚本。
jsonp请求：主要解决ajax的跨域请求问题，使用jsonp实现跨域首先保证服务器api支持jsonp请求的格式。
说明：若api的服务器端已做了跨域处理，则不需要考虑用jsonp请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../../first/vue1026.js"></script>
    <script type="text/javascript" src="../vue-resource151.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getJsonp">jsonp请求</button>
        {{obj | json}}
    </div>
</body>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            obj:null
        },
        methods:{
            getJsonp:function(){
                var url = "http://vueapi.ittun.com/api/jsonp";
                //利用vue-resource的jsonp方法实现跨域请求数据
                //注意：url后不需要加callback=fn这个参数，jsonp方法会自动加上
                this.$http.jsonp(url)
                .then(function(response){
                    this.obj = response.body;
                })
            }
        }
    });

</script>
</html>