【axios】第一部分 axios介绍和基本的使用

文章目录

【axios】第一部分 axios介绍和基本的使用
1. axios介绍和基本的使用
总结

1. axios介绍和基本的使用

1.1 json-server的介绍与服务器搭建

json-server可以为我们搭建http服务,因为我们在学习axios需要先服务端发送亲求,所以需要服务端这个角色.

json-server 在线文档

这里我可以按照这三个步骤:

npm install -g json-server 安装这个包

创建一个db.json文件

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

json-server --watch db.json 启动 json-server
出现下图这个就表示已经搭建成功!

1.2 axios 介绍和基本使用

1.2.1 什么是axios

前端最流行的 ajax 请求库
react/vue 官方都推荐使用 axios 发 ajax 请求
axios 在线文档

1.2.2 axios的特点

基于 xhr + promise 的异步 ajax 请求库
浏览器端/node 端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

1.2.3 axios的基本使用

 <h1>基本使用</h1>
    <hr>
    <button>GET请求</button>
    <button>POST请求</button>
    <button>PUT请求</button>
    <button>DELETE请求</button>
    <script>
        const btns = document.querySelectorAll('button')
        // 读取数据
        btns[0].onclick = function(){
            axios({
                //请求类型
                method:'GET',
                url:'http://localhost:3000/posts',
            }).then(response=>{
                console.log(response.data)
            })
        }

        //添加数据
        btns[1].onclick = function(){
            axios({
                // 请求类型
                method:'POST',
                //
                url:'http://localhost:3000/posts',
                //设置请求体
                data:{
                    title:"test-second",
                    author:"李四"
                }
            }).then(response=>{
                console.log(response.data)
            })
        }

        //更新数据
        btns[2].onclick = function(){
            axios({
                // 请求类型
                method:'PUT',
                //
                url:'http://localhost:3000/posts/3',
                //设置请求体
                data:{
                    title:"test-second",
                    author:"王五"
                }
            }).then(response=>{
                console.log(response.data)
            })
        }

        //删除数据
        btns[3].onclick = function(){
            axios({
                // 请求类型
                method:'DELETE',
                url:'http://localhost:3000/posts/3',
            }).then(response=>{
                console.log(response.data)
            })
        }
    </script>