zoukankan      html  css  js  c++  java
  • js axios请求方式

     引入

      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    get请求

            //默认请求为get
            axios('http://localhost:5000/Test/g1')
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //无参数,
            axios.get('http://localhost:5000/Test/g1' )
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //无参数,传对象
            axios({
                url:'http://localhost:5000/Test/g1',
                method:'get'
                })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //url上带参请求 
            axios({
                url: 'http://localhost:5000/Test/g2?a=3&str=abc',
                method: 'get'
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //带参
            axios({
                url: 'http://localhost:5000/Test/g2',
                method: 'get',
                //params是URL拼接
                params: {
                    a: 3,
                    str: 'abc'
                }
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //参数是集合
            axios({
                url: 'http://localhost:5000/Test/g4',
                method: 'get',
                data: [{ "age": 18, "name": "tom" }, { "age": 22, "name": "liu" }]
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });

    Post

            //无参数
            axios.post('http://localhost:5000/Test/p1')
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //传对象
            axios({
                url: 'http://localhost:5000/Test/p3',
                method: 'post',
                data: {
                    age: 18,
                    name: 'tom',
                    id: 1
                }
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //数组
            axios({
                url: 'http://localhost:5000/Test/p4',
                method: 'post',
                data: ["ab", "cd"]
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //传集合对象
            axios({
                url: 'http://localhost:5000/Test/p5',
                method: 'post',
                data: [{ "age": 18, "name": "tom" }, { "age": 22, "name": "liu" }]
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //传对象和URL参数混合
            axios({
                url: 'http://localhost:5000/Test/p6',
                method: 'post',
                params: { a: 'aaaa', b: 'bbbb' },
                data: [{ "age": 18, "name": "tom" }, { "age": 22, "name": "liu" }]
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //dynamic 对象
            axios({
                url: 'http://localhost:5000/Test/p7',
                method: 'post',
                data: { "age": 18, "name": "tom" }
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
            //dynamic 数组对象
            axios({
                url: 'http://localhost:5000/Test/p7',
                method: 'post',
                data: [{ "age": 18, "name": "tom" }, { "age": 22, "name": "liu" }]
            })
                .then(function (response) {
                    console.log(response.data)
                }).catch(function (err) {
                    console.log(err)
                });
  • 相关阅读:
    循环选择判断文件类型
    SpringBoot+MyBatis+Mysql+Durid实现动态多数据源
    Spring 常用注解
    Spring IOC容器中那些鲜为人知的细节
    java8 Stream对List<Map>的分组合并操作
    Java8的CompletableFuture 使用详解
    Spring MVC源码分析
    Spring AOP源码分析
    Spring中AOP必须明白的几个概念
    UriComponentsBuilder和UriComponents url编码
  • 原文地址:https://www.cnblogs.com/buchizaodian/p/14880450.html
Copyright © 2011-2022 走看看