axios基本使用

最新推荐文章于 2024-03-25 10:42:49 发布

Tujomila

最新推荐文章于 2024-03-25 10:42:49 发布

阅读量114

点赞数 2

分类专栏： vue axios 文章标签： vue.js html javascript 前端

本文链接：https://blog.csdn.net/Tujomila/article/details/108794402

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

HTTP请求交互的基本过程

在这里插入图片描述

不同的请求类型的作用

在这里插入图片描述

API的分类

在这里插入图片描述
非REST API：
基本上get做查询，post增删改都可以做。

Json-server搭建rest接口

下载

npm install -g json-server

创建db.json文件并添加JSON数据。

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

访问posts/1 parmas 直接返回一个对象
parmas 直接定位到某一个对象
在这里插入图片描述
访问posts?id=1 query 返回的是一个数组
query内部做的是过滤，对所有的数据进行过滤，产生一个新数组。

在这里插入图片描述

axios请求rest接口

get请求

<body>
   <button onclick="aget()">get</button>
   <button onclick="apost()">post</button>
   <button onclick="aput()">put</button>
   <button onclick="adelete()">delete</button>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    function aget(){
       
        axios.get('http://localhost:3000/posts')
            .then(res=>{
                console.log(res.data)
            })
    }
</script>

执行结果：
在这里插入图片描述
get请求还可以这么写:

axios.get('http://localhost:3000/posts',{
            params:{
                id:2
            }
        }).then(res=>{
            console.log(res.data)
        })

执行结果：
在这里插入图片描述
POST请求：

 function apost(){
        axios.post('http://localhost:3000/posts',{
             "id": 3, 
             "title": "333333", 
             "author": "333333333" 
        }).then(res=>{
            console.log(res.data)
        })
    }

执行结果：
在这里插入图片描述

执行多个并发请求操作：

 axios.all([aget(),apost()])
        .then(axios.spread(function (ag,ap) {
        }))

假如在function处输出ag或者ap，会显示undefind 暂时不太清楚。
执行结果：

在这里插入图片描述
put请求：

 axios.put('http://localhost:3000/posts/1',{
              "id": "30",
             "title": "put修改了",
             "author": "修改了"
             }).then(res=>{
                 console.log(res.data)
             })

执行结果：可以看出，其他字段可以正常修改，只有id没有被修改。原因暂不清楚

在这里插入图片描述

delete请求：

 axios.delete('http://localhost:3000/posts/1')
        .then(res=>{
            aget()
        })

执行结果： id=1的数据已经被删除

在这里插入图片描述

Tujomila

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录