zoukankan      html  css  js  c++  java
  • vue发送ajax请求

    一、vue-resource

    1、简介

      一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护。

    2、使用流程

    step1:安装

    【命令行输入】
    npm install vue-resource --save

    step2:引入

    【main.js】
    // 引入vue-resource
    import VueResource from 'vue-resource'
    
    // 使用vue-resource
    Vue.use(VueResource)

    step3:编码

    【格式:】
        this.$http.get().then()    返回的是一个Promise对象   

    step4:完整代码

    【使用vue-cli创建项目】
    https://www.cnblogs.com/l-y-h/p/11241503.html
    
    【main.js】
    import Vue from 'vue'
    import App from './App.vue'
    // 引入vue-resource
    import VueResource from 'vue-resource'
    
    // 使用vue-resource
    Vue.use(VueResource)
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    
    
    【App.vue】
    <template>
        <div>
            <div v-if="!repositoryUrl">loading...</div>
            <div v-else>most star repository is <a :href="repositoryUrl">{{repositoryName}}</a></div>
        </div>
        <!--App -->
    </template>
    
    <script>
        export default {
            data() {
                return {
                    repositoryUrl : '',
                    repositoryName : ''
                }
            },
            
            mounted() {
                // 发ajax请求,用以获取数据,此处地址意思是查询 github中 vue 星数最高的项目
                const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
                this.$http.get(url).then(
                    response => {
                        const result = response.data.items[0];
                        console.log(result)
                        this.repositoryUrl = result.html_url;
                        this.repositoryName = result.name;
                    },
    
                    response => {
                        alert('请求失败');
                    },
                );
            }
        }
    </script>
    
    <style>
    
    </style>

    step5:截图:

     请求正常

     点击链接跳转

     使用错误的地址

     弹出错误提示框

    二、axios

    1、简介

      一款vue库,用于处理ajax请求,vue2.x时广泛应用。

    2、流程

    step1:安装

    【命令行输入】
    npm install axios --save

    step2:引入

    【在哪里使用,就在哪里引入】
    import axios from 'axios';

    step3:完整代码

    【main.js】
    import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    
    
    
    【App.vue】
    <template>
        <div>
            <div v-if="!repositoryUrl">loading...</div>
            <div v-else>most star repository is <a :href="repositoryUrl">{{repositoryName}}</a></div>
        </div>
        <!--App -->
    </template>
    
    <script>
        import axios from 'axios';
        
        export default {
            data() {
                return {
                    repositoryUrl : '',
                    repositoryName : ''
                }
            },
            
            mounted() {
                // 发ajax请求,用以获取数据,此处地址意思是查询 github中 vue 星数最高的项目
                const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
                
                axios.get(url).then(
                    response => {
                        const result = response.data.items[0];
                        console.log(result)
                        this.repositoryUrl = result.html_url;
                        this.repositoryName = result.name;
                    }
                ).catch(
                    response => {
                        alert('请求失败');
                    },
                );
            }
        }
    </script>
    
    <style>
    
    </style>

    step5:截图与上面的 vue-resource 一样,此处不重复截图。

    3、axios 解决跨域问题

    参考: https://www.cnblogs.com/l-y-h/p/11815452.html

    4、axios 项目中封装使用

    参考:

      https://www.cnblogs.com/l-y-h/p/12955001.html#_label1

      https://www.cnblogs.com/l-y-h/p/12973364.html#_label1

  • 相关阅读:
    img的srcset和sizes属性作用
    屏幕尺寸,分辨率,像素,PPI之间到底什么关系
    img 的 srcset、sizes 属性和 picture 元素
    收房细则
    购买雅居乐湖居笔记不得不知。
    Andoird Studio 错误: 非法字符: 'ufeff' 解决方案。
    解决mysql 1040错误Too many connections的方法
    Android布局优化之include、merge、ViewStub的使用
    美国人、英国人、中国人一生都是如何度过
    Android常用正则工具类
  • 原文地址:https://www.cnblogs.com/l-y-h/p/11656129.html
Copyright © 2011-2022 走看看