Axios基本使用

Marsbupt

已于 2023-01-21 12:39:11 修改

阅读量395

点赞数 2

文章标签： javascript json 前端 ajax

于 2023-01-21 12:38:19 首次发布

本文链接：https://blog.csdn.net/Marsbupt/article/details/128745992

版权

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

本次使用jsDelivr CDN进行引入，一般工程建议使用：$ npm install axios进行包的安装

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

1 搭建`JSON-SERVER`服务器

1.1 使用`npm install -g json-server`进行安装

1.2 用一些数据进行`db.json`文件的创建

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

在这里插入图片描述

1.3 使用`json-server --watch db.json`指令启动服务

在这里插入图片描述

对于posts报文内容，如果要前往 http://localhost:3000/posts/1，将会得到内容:

{ "id": 1, "title": "json-server", "author": "typicode" }

现在对于报文内容进行添加，如下所示：

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" },
    { "id": 2, "title": "json-server1", "author": "typicode2" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

前往 http://localhost:3000/posts，则会得到：

[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  },
  {
    "id": 2,
    "title": "json-server1",
    "author": "typicode2"
  }
]

想要单独获取报文的话，使用http://localhost:3000/posts/2，则会得到：

{
  "id": 2,
  "title": "json-server1",
  "author": "typicode2"
}

1.4 路由规则

1.4.1 Plural routes

GET    /posts
GET    /posts/1
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

1.4.2 Singular routes

GET    /profile
POST   /profile
PUT    /profile
PATCH  /profile

2 Axios基本使用

首先在页面添加四个按钮，分别为get,post,put,delete功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button>发送GET请求</button>
        <button>发送POST请求</button>
        <button>发送PUT请求</button>
        <button>发送DELETE请求</button>
    </div>
</body>
</html>

2.1 GET功能

获取button，绑定点击事件，axios配置如下：

method方式为GET,url地址获取报文的第二段，此处调用Promise的then方法将报文信息进行返回

const btns = document.querySelectorAll('button');
        btns[0].onclick = function(){
            axios({
                method:'GET',
                url: 'http://localhost:3000/posts/2',
            }).then(response=>{
                console.log(response);
            }); 
        }

2.2 POST功能

添加一篇新文章：

btns[1].onclick = function(){
            axios({
                method:'POST',
                url: 'http://localhost:3000/posts',
                data:{
                    title:"json-server2",
                    author:'小红'
                }
            }).then(response=>{
                console.log(response);
            }); 
        }

2.3 PUT功能（进行数据更新）

btns[2].onclick = function(){
            axios({
                method:'PUT',
                url: 'http://localhost:3000/posts/3',
                data:{
                    title:"json-server3",
                    author:'小明'
                }
            }).then(response=>{
                console.log(response);
            }); 
        }

2.4 DELETE功能

btns[3].onclick = function(){
            axios({
                method:'DELETE',
                url: 'http://localhost:3000/posts/3',
                data:{
                    title:"json-server3",
                    author:'小明'
                }
            }).then(response=>{
                console.log(response);
            }); 
        }

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button>发送GET请求</button>
        <button>发送POST请求</button>
        <button>发送PUT请求</button>
        <button>发送DELETE请求</button>
    </div>
    <script>
        const btns = document.querySelectorAll('button');
        btns[0].onclick = function(){
            axios({
                method:'GET',
                url: 'http://localhost:3000/posts/2',
            }).then(response=>{
                console.log(response);
            }); 
        }
        //添加一篇新的文章
        btns[1].onclick = function(){
            axios({
                method:'POST',
                url: 'http://localhost:3000/posts',
                data:{
                    title:"json-server2",
                    author:'小红'
                }
            }).then(response=>{
                console.log(response);
            }); 
        }
        //更新数据
        btns[2].onclick = function(){
            axios({
                method:'PUT',
                url: 'http://localhost:3000/posts/3',
                data:{
                    title:"json-server3",
                    author:'小明'
                }
            }).then(response=>{
                console.log(response);
            }); 
        }
        //删除功能
        btns[3].onclick = function(){
            axios({
                method:'DELETE',
                url: 'http://localhost:3000/posts/3',
                data:{
                    title:"json-server3",
                    author:'小明'
                }
            }).then(response=>{
                console.log(response);
            }); 
        }
    </script>
</body>
</html>