axios详解

axios详解

上古浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。

Ajax(Asynchronous JavaScript and XML)：异步网络请求。
Ajax能够让页面无刷新的请求数据。

实现ajax的方式有多种，如jQuery封装的ajax，
原生的XMLHttpRequest，以及axios。但各种方式都有利弊

1.原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
2.jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架

Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，
只不过它是基于Promise的，符合最新的ES规范。具备以下特点：

1.在浏览器中创建XMLHttpRequest请求
2.在node.js中发送http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求和响应数据
6.取消要求
7.自动转换JSON数据
8.客户端支持防止CSRF/XSRF(跨域请求伪造)

原生XMLHttpRequest实现

原生XMLHttpRequest实现ajax请求

var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象
//ajax是异步的，设置回调函数
request.onreadystatechange = function () {
    // 状态发生变化时，函数被回调
    if (request.readyState === 4) {
    // 成功完成
        // 判断响应状态码
        if (request.status === 200) {
   
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
   
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
   
        // HTTP请求还在继续...
    }
}
// 发送请求:
request.open('GET', '/api/categories');
request.setRequestHeader("Content-Type", "application/json") //设置请求头
request.send();//到这一步，请求才正式发出

axios介绍

axios是基于Promise的，因此可以使用Promise API

axios的请求方式：

axios(config)
axios.request(config)
axios.get(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])
axios.delete(url [,config])
axios.patch(url [,data [,config]])
axios.head(url [,config])
————————————————
版权声明：本文为CSDN博主「Hello Simon」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_31947477/article/details/106328200

//执行GET请求
import axios from