Vue中发送HTTP请求

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue中发送HTTP请求" title="HTTP请求">HTTP请求

 

 

HTTP库：

vue-resource：https://github.com/pagekit/vue-resource

axios：http://www.axios-js.com/

 

 

前言

设置请求的根目录

 

 

 

 

前言

Vue中并没有直接提供对HTTP请求模块的封装，而是以使用一个单独的插件去封装了HTTP的模块，vue-resource是vue提供的一个插件，除此之外你还可以使用其它的插件比如axios。

<script src="../lib/vue-2.4.0.js"></script>
    <!-- vue-resource依赖于vue,它只是在Vue的this上扩展了$http-->
    <script src="../lib/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="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: {},
        methods: {
            getInfo() {
                //  这里如果使用webstrom启动访问会报错，因为这是跨源访问，所以
                // 按理说应该是在源网站上访问该页面
                this.$http.get(\'http://vue.studyit.io/api/getlunbo\')
                    .then((success) => {
                        console.log(success);
                    }, (error) => {
                        console.log(error);
                    })
            },
            postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
                //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
                //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
                this.$http.post(\'http://vue.studyit.io/api/post\', {}, {})
                    .then(success => {
                        console.log(success);
                    }) // error可以省略
            },
            jsonpInfo() {
                this.$http.jsonp(\'http://vue.studyit.io/api/jsonp\')
                    .then(result => {
                        console.log(result);
                    })
            }
        }
    })
</script>

设置请求的根目录

在vue-resource的文档里有Configuration项，在其中有说明。

// main.js中
// http请求
import VueResource from \'vue-resource\'
Vue.use(VueResource)
// 设置全局http请求根路径[最后不带/，在请求时之前也不能带/]
Vue.http.options.root = \'http://vue.studyit.io\';

以上是 Vue中发送HTTP请求 的全部内容， 来源链接： utcz.com/z/375672.html

回到顶部