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)
                });
  • 相关阅读:
    Ajax学习笔记(1)
    html学习笔记(2)-字母大小写转换练习
    html学习笔记(1)--处理特殊字符以及其他的一些小细节
    jQuery学习笔记(8)--表格筛选
    jQuery学习笔记(7)--表格展开关闭
    Linux学习8-Linux常用命令(4)
    Linux学习7-Linux常用命令(3)
    Linux学习6-Linux常用命令(2)
    Linux学习6-Linux常用命令(1)
    Linux学习5-初学者注意事项
  • 原文地址:https://www.cnblogs.com/buchizaodian/p/14880450.html
Copyright © 2011-2022 走看看