1.什么是 axios ?

Axios 是一个基于 Promise 的 http客户端，可以在浏览器，node.Js中去运行,浏览器可以借助 axios 向服务端发送 ajax 请求,同样可以在node.js中发送http请求
它前端最流行的 ajax 请求库
react/vue 官方都推荐使用 axios 发 ajax 请求
官方文档

2.axios 的特点

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

3.axios 常用语法(返回一个Promise对象)

axios(config): //通用/最本质的发任意类型请求的方式
axios(url[, config]): //可以只指定 url 发 get 请求
axios.request(config): //等同于 axios(config) 
axios.get(url[, config]): //发 get 请求
axios.delete(url[, config]): //发 delete 请求
axios.post(url[, data, config]): //发 post 请求
axios.put(url[, data, config]): //发 put 请求
axios.defaults.xxx: //请求的默认全局配置
axios.interceptors.request.use(): //添加请求拦截器
axios.interceptors.response.use(): //添加响应拦截器
axios.create([config]): //创建一个新的 axios(它没有下面的功能)
axios.Cancel(): //用于创建取消请求的错误对象
axios.CancelToken(): //用于创建取消请求的 token 对象
axios.isCancel(): //是否是一个取消请求的错误
axios.all(promises): //用于批量执行多个异步请求
axios.spread(): //用来指定接收所有成功数据的回调函数的方法

4.axios 的基本使用:

这里我用一个demo来演示axios的基本使用,要求如下:用json-server来充当http服务器,页面当中有4个按钮,分别对应 GET、POST、PUT、delete请求,json-server服务器当中有post页面里面存放的是一些数据,每个数据有对应的id号,按下相应的按钮来向服务器发送请求,服务器相应结果!

demo页面显示如下:

json-server服务器内部如下:

1).发送get请求:

// 复习常用的ajax请求方法:
    // 1.get:获取数据(只读不写)
    // 2.post:新增数据(可读可写)
    // 3.put:更新数据
    // 4.delete:删除数据

// 获取按钮
var btns = document.querySelectorAll('button');

// 绑定事件
// 1.GET(获取某一篇文章)
btns[0].onclick = function(){
    // 发送ajax请求
    axios({
        // 请求类型
        method: 'GET',
        // URL(获取第二篇文章)
        url:'http://localhost:3000/posts/2',
        // 其他设置(url参数,请求头信息等..)
    }).then(response => {
        console.log(response);
    })
}

运行结果如下:(成功读取到数据)

2).发送post请求:

// 2.POST(新增某一篇文章)
btns[1].onclick = function(){
    // 发送ajax请求
    axios({
        // 请求类型
        method: 'POST',
        // URL(这里不用写指定id好,只需要写文件夹名即可)
        url:'http://localhost:3000/posts',
        // 其他设置(url参数,请求头信息等..)
        data:{
            title:'hi!',
            author:'jo'
        }
    }).then(response => {
        console.log(response);
    })
}

运行结果如下:(成功添加数据)

服务器内新增 id为3 的文章

3).发送put请求:

// 3.PUT(更新某一篇文章)
btns[2].onclick = function(){
    // 发送ajax请求
    axios({
        // 请求类型
        method: 'PUT',
        // URL(PUT更新需要指定更新文章,即这里需要加文章的id号)
        url:'http://localhost:3000/posts/3',
        // 其他设置(url参数,请求头信息等..)
        data:{
            title:'hi!',
            author:'tom'
        }
    }).then(response => {
        console.log(response);
    })
}

运行结果如下:(成功更新(更改)数据)

服务器内新增 id为3 的文章的作者变为tom

3).发送delete请求:

// 4.delete(删除某一篇文章)
btns[3].onclick = function(){
    // 发送ajax请求
    axios({
        // 请求类型
        method: 'delete',
        // URL(PUT更新需要指定删除文章,即这里需要加文章的id号)
        url:'http://localhost:3000/posts/3',
        // 其他设置(url参数,请求头信息等..)
    }).then(response => {
        console.log(response);
    })
}

运行结果如下:(成功删除数据)

服务器内删除掉了 id为3 的文章

5.返回结果的解析

config：配置对象，里面包含请求类型（method），请求url，请求体等。
data：响应体的结果，服务器返回的结果，它是一个对象，因为axios会自动将服务器返回结果进行jason解析,即将响应体转成对象返回
headers：响应头信息.
request：原生的ajax请求对象，我们都知道axios是用来发送ajax请求的，而发送ajax请求就必须用到底层的XMLHttpRequest的实例对象，而这里的requset这个属性保存的就是当前axios在发送请求时所创建的ajax请求对象，也就是XMLHttpRequest的实例对象
status：响应状态码
statusText：响应状态字符串