Vue-resource 实现 get, post请求

news2024/10/6 18:14:44

Vue-resource是Vue高度集成的第三方包，能很方便的发送请求。

注意Vue-resource依赖于Vue，只能在Vue环境下使用。

导包

//依赖于Vue
<script src="./js/vue.js"></script>
<script src="./js/elementui.js"></script>
//导包
<script src="./js/vue-resource.min.js"></script>

使用：

请求方法（请求url，请求体body，可选参数options）

get(url,[options])

head(url，[options])

delete(ur1，[options])

jsonp(url，[options])

//body是要发送给服务器的数据对象  以对象的形式存在
post(url，[body]，[options])

put(url,[body],[options])

patch(url，[body]，[options])

全局使用：

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

Vue实例中使用：

this.$http.get('/someUr',[options]).then(successCallback，errorCallback);
this.$http.post('/someUr',[body],[options]).then(successCallback，errorCallback);

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/commen.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/elementui.css">
    <title>Document</title>
</head>

<body>
<div id="app">
    <input type="button" value="get请求" @click="getMessage">
    <input type="button" value="post请求" @click="postMessage">
</div>
</body>
</html>

<!-- 引入组件库 -->
<script src="./js/vue.js"></script>
<script src="./js/elementui.js"></script>
<script src="./js/vue-resource.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
        return{}
        },
        methods: {
            getMessage(){
                this.$http.get('http://localhost:3003/compilerOptions').then(function(result){
                    console.log(result)
                })
            },
            postMessage(){
                this.$http.post('http://localhost:3003/compilerOptions',{}).then(function(result){
                    console.log(result.body)
                })
            }
        }
    });

</script>
<style>

</style>