VUE HTTP调用方式总结

一、vue-resource
1、引入资源方式
1)下载vue-resource.js,添加到项目中
2)CDN:http://www.bootcdn.cn/vue-resource/
3)npm install vue-resource 即可 。然后在main.js中配置import VueResource from ‘vue-resource’; 然后用Vue.use(VueResource) 方法启用插件。
2、使用$http,直接封装在methods中
1)get方式

this.$http.get('url',{
        param1:value1,  
        param2:value2  
    }).then(function(response){  
        // response.data中获取ResponseData实体
    },function(response){  
        // 发生错误
    });

2)post方式

this.$http.post('url',{  
        param1:value1,  
        param2:value2  
    },{  
        emulateJSON:true  
    }).then(function(response){  
        // response.data中获取ResponseData实体
    },function(response){  
        // 发生错误
    });

注:put、delete类似

二、axios
1、引入资源方式
1)下载axios.min.js,添加到项目中
2)使用CDN:
3)npm方式: npm install axios
2、使用axios,直接封装在methods中
1)get方式

axios.get('url', {
        params: {
            param1: value1,
            param2:value2
        }
    }).then(function (response) {
        // response.data中获取ResponseData实体
    }).catch(function (error) {
        // 发生错误
    });

2)post方式:默认json格式

axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }).then(function (response) {
        // response.data中获取ResponseData实体
    }).catch(function (error) {
        // 发生错误
    });

注:put、delete类似

三、ajax
1、引入资源方式
1)下载jquery.min.js,添加到项目中 http://jquery.com/download/
2)使用CDN:
https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js
https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js
2、使用方式,直接封装在method中

$.ajax({
    url:'url',
    type:'POST', //GET、PUT、DELETE
    async:true,    //是否异步
    data:{
        name:'zhang',
        age:28
    },
    timeout:5000,    //超时时间
    dataType:'json',    //返回的数据格式:json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        // 发送前处理
    },
    success:function(data,textStatus,jqXHR){
        // 调用成功,解析response中的data到自定义的data中
    },
    error:function(xhr,textStatus){
        // 调用时,发生错误
    },
    complete:function(){
        // 交互后处理
    }
})
Vue可以通过重新调用计算属性来更新计算属性的值。当计算属性依赖的数据发生变化时,Vue会自动重新计算计算属性的值。这可以通过两种方式来实现。 首先,Vue会在计算属性依赖的数据发生变化时自动重新计算计算属性的值。这意味着,当计算属性依赖的数据发生变化时,Vue会重新执行计算属性的函数,并将结果缓存起来。这样,当计算属性被访问时,就会直接返回缓存的结果,而不是重新计算一遍。这样可以提高性能,避免重复计算。 其次,Vue还提供了一个特殊的方法`$forceUpdate`,可以手动强制重新调用计算属性。通过调用`$forceUpdate`方法,Vue会强制重新计算所有的计算属性,即使它们的依赖数据没有发生变化。这样可以确保计算属性的值是最新的。 总结起来,Vue会在计算属性的依赖数据发生变化时自动重新计算计算属性的值,同时也提供了手动强制重新调用计算属性的方法`$forceUpdate`。这样可以保证计算属性的值是最新的。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue中的计算属性computed](https://blog.csdn.net/m0_59345890/article/details/126652091)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue3 _ 6. Vue 计算属性](https://blog.csdn.net/weixin_45908370/article/details/118383398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值