zoukankan      html  css  js  c++  java
  • vue----Fetch/Axios

    Fetch

    get请求

    <template>
        <div>
            home
        </div>
    </template>
    <script lang="ts">
        import {Component,Vue} from "vue-property-decorator"
        @Component({
            components:{},
            mounted(){
               const result = fetch('https://jsonplaceholder.typicode.com/todos/1')
                    .then(response => {return response.json()}) //可以简写 .then(response => response.json())
                    .then(json => console.log(json)) //json等于return response.json()
            }
        })
        export default class Home extends Vue{
        }
    </script>
    <style scoped>
    </style>
    

    post请求(模拟form表单提交数据)

    <template>
        <div>
            <form @submit.prevent="onsubmit">
                <input v-model="userinfo.username"></input>
                <button type="submit">提交</button>
            </form>
        </div>
    </template>
    <script lang="ts">
        import {Component,Vue} from "vue-property-decorator"
        @Component({
            components:{},
            data(){
                return{
                    userinfo:{
                        username:''
                    }
                }
            },
            methods:{
                onsubmit(){
                    fetch("https://jsonplaceholder.typicode.com/todos",{
                        method:"POST",
                        body:JSON.stringify(this.$data.userinfo),
                    }).then(res=>{
                        console.log(res)
                    })
                }
            }
        })
        export default class Home extends Vue{
        }
    </script>
    <style scoped>
    </style>
    

      

    Axios

    Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下:

    • 从浏览器中创建 XMLHttpRequests
    • 从 node.js 创建 http 请求
    • 支持 Promise API
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换 JSON 数据
    • 客户端支持防御 XSRF(跨站请求伪造)

    GitHub:https://github.com/axios/axios

    安装

    npm install axios

    调用 get 请求

    调用 axios 的 get 请求并自动装箱数据

    axios
        .get('data.json')
        .then(response => (this.info = response.data));

    完整的 HTML

    关于promise:https://blog.csdn.net/hyupeng1006/article/details/80351174

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>网络篇 Axios</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
    
    <div id="vue">
        <div>名称:{{info.name}}</div>
        <div>地址:{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>
        <div>链接:<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            data() {
                return {
                    info: {
                        name: null,
                        address: {
                            country: null,
                            city: null,
                            street: null
                        },
                        url: null
                    }
                }
            },
            mounted() {
                axios
                    .get('data.json')
                    .then(response => (this.info = response.data));
            }
        });
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    Windows10安装Oracle19c数据库详细记录(图文详解)
    构建 FTP 文件传输服务器
    构建 Samba 文件共享服务器
    Linux磁盘配额(xfs)
    Linux配置磁盘配额(ext4)
    Linux 制作ISO镜像
    Linux磁盘分区
    用户和文件权限管理命令的使用(实验)
    CentOS7 配置yum源
    VMware CentOS 7 安装(vmware的版本15.5)
  • 原文地址:https://www.cnblogs.com/yanxiaoge/p/11088898.html
Copyright © 2011-2022 走看看