axios

B1293773843

已于 2022-03-24 10:57:31 修改

阅读量834

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript

于 2022-03-23 17:14:28 首次发布

本文链接：https://blog.csdn.net/weixin_58562753/article/details/123678556

版权

axios

摘要由CSDN通过智能技术生成

get和post

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。

GET和POST还有一个重大区别，简单的说：

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

不同类型的请求及其作用

1. GET: 从服务器端读取数据

2. POST: 向服务器端添加新数据

3. PUT: 更新服务器端已经有的数据

4. DELETE: 删除服务器端数据

服务器端都是http请求。

XHR的API

1. XMLHttpRequest(): 创建 XHR 对象的构造函数

2. status: 响应状态码值, 比如 200, 404

3. statusText: 响应状态文本

4. readyState: 标识请求状态的只读属性

0: 初始 1: open()之后 2: send()之后 3: 请求中 4: 请求完成

5. onreadystatechange: 绑定 readyState 改变的监听

6. responseType: 指定响应数据类型, 如果是'json', 得到响应后自动解析响应体数据为JSON，

如果不声明，数据则为json文本，需要通过JSON.parse()解析数据

7. response: 响应体数据, 类型取决于 responseType 的指定

8. timeout: 指定请求超时时间, 默认为 0 代表没有限制

9. ontimeout: 绑定超时的监听

10. onerror: 绑定请求网络错误的监听

11. open(): 初始化一个请求, 参数为: (method, url[, async])(影响send)

12. send(data): 发送请求(可能是同步可能是异步)

同步：等待响应结果，如果请求要花两秒钟，则send执行两秒钟才结束，才执行下面的代码

异步：不用等待响应结果，继续执行下面的代码

13. abort(): 中断(发出去还没有返回的)请求

请求头的值才是要传递的数据，名称只是数据的标识。

14. getResponseHeader(name): 获取指定名称的响应头值

15. getAllResponseHeaders(): 获取所有响应头组成的字符串

16. setRequestHeader(name, value): 设置请求头

启动json-server：

json-server --watch db.json

使用axios函数发送请求

axios返回一个promise对象

<script>
        const btns = document.querySelectorAll('button')
        //获取数据
        btns[0].onclick = function(){
            axios({
                method:"GET",
                url:'http://localhost:3000/posts/2',
            }).then((resolve)=>{
                console.log(resolve)
            })
        }
        //添加新的文章
        btns[1].onclick = function(){
            axios({
                method:"POST",
                url:'http://localhost:3000/posts',
                //设置请求体
                data: {
                    title: "今天天气不错, 还挺风和日丽的",
                    author: "张三"
                }
            }).then((resolve)=>{
                console.log(resolve)
            })
        }
        //更新数据
        btns[2].onclick = function(){
            axios({
                method:"PUT",
                url:'http://localhost:3000/posts/3',
                //设置请求体
                data: {
                    title: "今天天气不错, 还挺风和日丽的",
                    author: "张三三"
                }
            }).then((resolve)=>{
                console.log(resolve)
            })
        }
        //删除数据
        btns[3].onclick = function(){
            axios({
                method:"DELETE",
                url:'http://localhost:3000/posts/3',
                //设置请求体
            }).then((resolve)=>{
                console.log(resolve)
            })
        }
</script>