Vue学习:vue-resource 基本使用

Merbng · 简书 · · 2019-05-18 00:44

正文

GET请求

            getInfo() {
                this.$http.get('http://yapi.demo.qunar.com/mock/64532/bbyy_employee/user/aboutAs').then(function (result) {
                    console.log(result);
                    console.log(result.body);//拿到服务器返回成功的数据
                    console.log(result.data);
                })
            }

POST请求

发起post请求 application/x-wwww-form-urlencoded
手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
通过post方法的第三个参数，{emulateJSON:true} 设置提交的内容类型为普通表单数据格式

postInfo() {
                this.$http.post('http://yapi.demo.qunar.com/mock/65177/puredo-api/coupon/appletCouponInfo/getCoupon', {couponId:'4FBCAEE40DD1408C8BDC892518E8BD09',userId:1}, {emulateJSON: true}).then(function (result) {
                    console.log(result.body)
                })
            }

JSONP请求

jsonpInfo() {
                //发起JSONP请求
                this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
                    console.log(result.body)
                })
            }

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-resource 基本使用</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-resource-1.3.4.js"></script>

</head>
<body>
<div class="app">
    <input type="button" value="GET" @click="getInfo">
    <input type="button" value="POST" @click="postInfo">
    <input type="button" value="JSONP" @click="jsonpInfo">
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊'
        },
        methods: {
            getInfo() {
                this.$http.get('http://yapi.demo.qunar.com/mock/64532/bbyy_employee/user/aboutAs').then(function (result) {
                    console.log(result);
                    console.log(result.body);//拿到服务器返回成功的数据
                    console.log(result.data);
                })
            },
            postInfo() {
                //发起post请求   application/x-wwww-form-urlencoded
                //手动发起的post请求，默认没有表单格式，所以有的服务器处理不了
                //通过post方法的第三个参数，{emulateJSON:true} 设置提交的内容类型为 普通表单数据格式
                this.$http.post('http://yapi.demo.qunar.com/mock/65177/puredo-api/coupon/appletCouponInfo/getCoupon', {couponId:'4FBCAEE40DD1408C8BDC892518E8BD09',userId:1}, {emulateJSON: true}).then(function (result) {
                    console.log(result.body)
                })
            },
            jsonpInfo() {
                //发起JSONP请求
                this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
                    console.log(result.body)
                })
            }
        }
    })
</script>
</body>
</html>