vue-resource发起get,post,jsonp请求

adonislu 2020-05-16

vue-resource发起get,post,jsonp请求

以下是一个简单的 Get 请求实例，请求地址是一个js文件：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!--vue-resource.min.js就是发起请求的js它依赖于vue.js所以它必须放在vue.js后面-->
    <script src="../js/vue-resource.min.js"></script>

</head>

<body>
    <div id="app">
        <button @click="getinfo">get请求</button>
    </div>

    <script>
        var vm = new Vue({
            el: ‘#app‘,
            data: {},
            methods: {
                getinfo() {
                    Vue.http.get("../js/vue.js").then((result) => {
                    //this.$http.get("../js/vue.js").then((result) => {
                       // console.log(result.data);
                        console.log(result.body);	//data和body效果一样，推荐使用body
                    }, () => {
                        alert("请求调用失败！");
                    });
                }
            }
        });
    </script>
</body>

</html>

post 请求和jsonp请求

post 发送数据到后端，需要第三个参数 {emulateJSON:true}。

emulateJSON 的作用： 如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-resource.min.js"></script>

</head>

<body>
    <div id="app">
        <button @click="getinfo">get请求</button>
        <button @click="postinfo">post请求</button>
        <button @click="jsonpinfo">jsonp请求</button>
    </div>

    <script>
        var vm = new Vue({
            el: ‘#app‘,
            data: {},
            methods: {
                getinfo() {
                    Vue.http.get("../js/vue.js").then((result) => {
                        // this.$http.get("../js/vue.js").then((result) => {
                        console.log(result.body);
                    }, () => {
                        alert("请求调用失败！");
                    });
                },
                postinfo() {
                    //发送 post 请求
                    //第一个参数是请求地址，第二个是数据，第三个是
                    this.$http.post(‘http://vue.studyit.io/api/post‘, {}, {
                        emulateJSON: true
                    }).then(function (res) {
                        // document.write(res.body);
                        console.log(res.body);
                    }, function (res) {
                        console.log(res.status);
                    });
                },
                jsonpinfo() {//发送jsonp请求
                    this.$http.get("../js/vue.js").then((result) => {
                        console.log(result.body);
                    }, () => {
                        alert("请求调用失败！");
                    });
                }
            }
        });
    </script>
</body>

</html>

设置根域名

通过设置根域名可以更有效的管理请求地址

定义：

Vue.http.options.root = ‘根地址‘

使用

要想使根路径生效，需要使用相对路径，即url最前面没有/

下面是一个案例

//定义根域名
Vue.http.options.root = ‘../js‘;
//.....
//发送请求
this.$http.get(‘vue.js‘).then()
//上面的地址会自动被拼接成
//../js/vue.js

全局配置 emulateJSON

  • Vue.http.options.emulateJSON=true;

  • 这样就可以在发送post请求时不设置emulateJSON参数了。

adonislu

adonislu

相关推荐

webpack+vue项目实战 前端与后端的数据交互和前端展示数据

简单点说呢，就是与后端的数据交互和怎么把数据展示出来，用到的资源主要是element-ui和vue-resource，其它参考。今天讲到的一些功能开发，主要就是请求列表数据，详情数据，分页功能操作，搜索，搜索标签等的开发。今天这个，按照下面步骤，一步一步来

简单的快乐 / 0评论 2020-05-28

http,ajax,$.ajax,vue-resource,axios的知识大串联

前言前端越来越工程化,而ajax是整个前端的核心,所以ES规则和各种封装的工具类越来越多;借此机会我把http,XMLHttpRequest,ajax,$.ajax,vue-resource,axios做了一个知识大串联,本文主要是侧重将知识串成一条线,自

小傻 / 0评论 2019-06-26

基于vue-resource jsonp跨域问题的解决方法

最近在学习vue.js 碰到个ajax跨域请求的问题，之前知道可以用jsonp解决，但是一直没实践过，这次用发现里面好多问题，所以现在记录下来，希望可以给刚接触使用jsonp的同学一点帮助！关于什么是jsonp，以及为什么要用jsonp我就不多说了，不明白

王帅 / 0评论 2019-05-08

新手vue构建单页面应用实例代码

使用vue-cli构建初始化项目：vue init webpack project. 它会去找到package.json的scripts对象，执行node bulid/dev-server.js. 在这文件里，配置了Webpack，会让它去编译项目文件，并

maodun / 0评论 2017-09-18

vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

最近使用vue-cli做了一个小小的项目，在项目中需要使用vue-resource来与后台进行数据交互，所以我使用了本地json数据来模仿后台获取数据的流程。"bulletin": "会指定餐饮服务商。1》首先请求根目录下的d

meichuanyi / 0评论 2017-08-04

vue-resource调用promise取数据方式详解

用了好久的vue-resource，好像每一次使用的时候，都要去看一下上一次是怎么写的，具体的语法过不了多久又忘记了，甚至不知道其中的原理，只知道一些简单的使用，一会儿用ES6的语法，一会儿又用传统的语法，为了改变这种不良的习惯，并理清vue-resour

85193658 / 0评论 2017-07-21

详解Vue 2.0封装axios笔记

单页面应用大多采用前后端分离开发思路，我们知道，前端和后端交互有多中方式，今天我们主要讲解Ajax部分。最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent

hanliuxinming / 0评论 2017-06-22

详解vue-resource promise兼容性问题

就是“在安卓低版本，如果你在vue项目中使用了vue-resource，那么http请求和响应都是正常的，但是，注意，但是来了啊！！但是响应进不去promise回调”，下面我们来具体看一下。npm install vue-resource --save注：

前端开发Kingcean / 0评论 2017-06-20

Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

上一篇我们介绍了如何使用vue resource处理HTTP请求，结合服务端的REST API，就能够很容易地构建一个增删查改应用。这个应用始终遗留了一个问题，Web App在访问REST API时，没有经过任何认证，这使得服务端的REST API是不安全

LittleCoder / 0评论 2017-05-10

详解vue与后端数据交互(ajax)：vue-resource

本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。</html>上面代码实现了，点击按钮，就发送get请求，然后把拿到的数据alert出来。});th

zhuchengzzcc / 0评论 2017-03-16

Vue 2.0+Vue-router构建一个简单的单页应用（附源码）

vue.js 是 目前 最火的前端框架，vue.js 兼具 angular.js 和 react.js 的优点，并剔除它们的缺点，并且提供了很多的周边配套工具 如vue-router 、vue-resource 、vuex等等，通过他们我们可以很轻松的构建

CRMCRMCRMDS / 0评论 2017-03-14

Vue-resource实现ajax请求和跨域请求示例

vue-resource是Vue提供的体格http请求插件，如同jQuery里的$.ajax，用来和后端交互数据的。参数 类型 描述 url string 请求的URL method strin

ccccheryl / 0评论 2017-02-23

详解vue 中使用 AJAX获取数据的方法

在VUE开发时，数据可以使用jquery和vue-resource来获取数据。在获取数据时，一定需要给一个数据初始值。</script>这里必须设置 vue的data的初始数据，即使此时数据为空。</script>这里在需要先将 t

ajaxtony / 0评论 2017-01-18