axios简单应用

axios简单应用Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。初始化HTML<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="author" content="avao...

一鹿由妳

136人浏览 · 2020-03-03 14:28:28

一鹿由妳 · 2020-03-03 14:28:28 发布

axios简单应用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

初始化HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="avaos">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios使用</title>

    <style>
        #app {
            width: 400px;
            margin: 100px auto;
            text-align: center;
        }

        button:hover {
            cursor: pointer;
        }
    </style>

</head>
<body>
    <div id="app">
        <button onclick="testGet()">Get请求</button>
        <button onclick="testPost()">Post请求</button>
        <button onclick="testPut()">Put请求</button>
        <button onclick="testDelete()">Delete请求</button>
    </div>
</body>
</html>

引入axios

<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>

Get 请求


function testGet(){
    console.log("get");
    
    axios.get('http://localhost:3000/posts')
        .then(response=>{
                    console.log("/posts", response.data);
                }
        );
}

Post 请求

function testPost(){
   console.log("post");
   
   axios.post('http://localhost:3000/posts',  {"title": "json-server2", "author": "typicode2" })
       .then(response=>{
                   console.log("/posts", response.data);
               }
       );
}

Put 请求

function testPut(){
   console.log("put");
   
   axios.put('http://localhost:3000/posts/2',  {"title": "json-server2...", "author": "typicode2.." })
       .then(response=>{
                   console.log("/posts", response.data);
               }
       );
}

Delete 请求

function testDelete(){
   console.log("delete");
   
   axios.delete('http://localhost:3000/posts/2')
       .then(response=>{
                   console.log("/posts", response.data);
               }
       );
}