Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

  • Axios is widely used in requests and today we're going to take a look at Axios

The introduction of axios

  • The installation
    • npm install axios
  • Use the bower
    • bower install axios
  • Use the CDN
    • <scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>

The basic use

<body>
    <div>
        <button>Send a GET request</button>
        <button>Send a POST request</button>
        <button>Send a PUT request</button>
        <button>Send a DELETE request</button>
    </div>
    <script>
        // Get the button
        const btns = document.querySelectorAll('button')

        // The first button binds the event
        btns[0].onclick = () = > {
            // Send an AJAX request
            axios({
                // Request type
                method: 'GET'.// URL
                url: 'http://localhost:3000/posts/1',
            }).then(response= > {
                console.log(response)
            })
        }

        // The second button adds a new article
        btns[1].onclick = () = > {
            // Send an AJAX request
            axios({
                // Request type
                method: 'POST'.// URL
                url: 'http://localhost:3000/posts'.// Set the request body
                data: {
                    title: "Light rain continued today.".author: "vike"
                }

            }).then(response= > {
                console.log(response)
            })
        }

        // The third button updates data
        btns[2].onclick = () = > {
            // Send an AJAX request
            axios({
                // Request type
                method: 'PUT'.// URL
                url: 'http://localhost:3000/posts/2'.// Set the request body
                data: {
                    title: "Light rain continued today.".author: "vike123"
                }

            }).then(response= > {
                console.log(response)
            })
        }

        // The fourth button deletes data
        btns[3].onclick = () = > {
            // Send an AJAX request
            axios({
                // Request type
                method: 'DELETE'.// URL
                url: 'http://localhost:3000/posts/2'.// Set the request body
            }).then(response= > {
                console.log(response)
            })
        }
    </script>
</body>
Copy the code

Other use

        // Send a GET request
        btns[0].onclick = () = > {

            axios.request({
                // Request type
                method: 'GET'./ / url
                url: 'http://localhost:3000/posts/1'
            }).then(response= > {
                console.log(response)
            })
        }

        // Send a POST request
        btns[1].onclick = () = > {
            axios.post(
                // Request an address
                'http://localhost:3000/comments'.// Request content
                {
                    "body": "vike"."postId": 2
                }
            ).then(response= > {
                console.log(response)
            })
        }
Copy the code

Axios is configured by default

        // Default configuration
        axios.defaults.method = 'GET' // Set the default request type to GET
        axios.defaults.baseURL = 'http://localhost:3000' // Set the base URL
        axios.defaults.params = {id:2} // Additional url parameters
        axios.defaults.timeout = 3000  // Set the timeout period
Copy the code

More configuration

  • Axios Chinese website

conclusion

  • Get STH