浅析axios原理与使用（包括axios的优雅写法与res的解构赋值）

前言

目前的前端项目中，用的最多的便是axios交互。所以本节将针对axios的原理对axios的使用进行剖析讲解，要求读者读文章时需要有ajax的基础（了解知原理）。文章后面会对返回值res的解构进行讲解。

一，什么是axios

官方定义：Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。
原理：axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。（Promise在后续博客中会有更新，欢迎关注）。

二，axios的基本使用

首先需要引入axios文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.1 不含参的axios调用

不含参的调用遵循以下格式：

axios(methods,url,fn)

实例如下：

        const result = axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks'
        }).then(function(books) {
            console.log(books);
        })
        console.log(result);

其中，result是一个promise对象:

从这点可以看出，在调用axios后得到的是promise对象（在后续博客中会更新promise的详细讲解，欢迎关注！）
接着，我们来看看回调函数中打印出来的返回值是什么：

object是一个对象，对象中最重要的属性是data属性：

而data中又有一个data，这个data中的data是获取到的内容：
所以我们在渲染内容时其实用到的是books.data.data；获取到的状态码是books.data.status，其余同理。

2.2 含参数的axios调用

axios的调用无非两种，一种是发起get请求，一种是发起post请求，而发起这两种请求时我们都需要根据接口文档来分析是否需要传递参数。如果要传递参数，两种请求的传参格式是不一样的。

我们先来看看传参的axios具体使用格式是什么：

axios(methods, url, 参数:{}, fn)

其中，==发起get请求，参数传递格式是params：{参数}；而发起post请求，参数传递的格式是data: {参数}。

具体实例如下：
先看发起get请求：

        axios({
            // 请求方式
            method: 'GET',
            // 请求地址
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            // url中的查询参数
            params: {
                id: 1
            }
        }).then(function(res) {
            console.log(res);
        })

发起post请求：

        axios({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/post',
            data: {
                name: 'zs',
                age: 20
            }
        }).then(function(res) {
            console.log(res);
        })

三，axios的原理（拦截器）

这里抛出个问题，在第一个点中我们讲过，在调用axios请求后获得的对象中有一个data属性，而data中还有一个data，我们获取到的数据就在这个最里面的data中，这是为什么呢？

3.1 客户端与服务器之间的交互原理（复习可略过）

这里对客户端与服务器之间的交互进行温习：
客户端给服务器发起一个请求，ajax，axios等都是用来做这个事情的。在发起请求时，会根据接口文档，客户端向服务器提供url地址，请求方法，以及参数；

发给服务器后，服务器接收到客户端的请求后，会响应服务器，并把响应信息传给客户端。客户端收到信息后可以渲染到界面上。

3.2 浅析axios原理

根据上面的讲解，我们意识到了axios获得的数据不是真实的数据，真实的数据是最里面data的内容，这是因为axios相当于是在请求数据后，在数据外面套了一层壳后返回给了客户端，所以客户端获取数据时需要层层剖析，具体如下图所示：

四，axios的优雅写法（了解）

4.1 浅析async和await

（这里只是讲解用法与浅层面上的原理，但教会您使用绰绰有余，后续还会更新原理的详细讲解，js的同步与异步等知识点，欢迎关注！）

首先，async和await是配合使用的。大家可以把async理解为一种函数类型。
请看以下代码：

async function fn(){
  return 100
}
console.log(fn())  //返回一个成功态的promise对象，result 是 100
fn().then(
  data=>{
    console.log(data)
  }
) // 100

而await需要配合async的使用，await后面要求接Promise，上文讲过，axios传回来的是一个Promise，所以我们的await后面也可以接axios，相当于是一个回调函数。await p相当于是p.then，而且是指成功状态的回调函数。
await与then的区别是，then的回调函数中需要传参，而await不需要

这里我们重点使用async与await的配合使用，请按以下格式使用：

(async function(){
  const res = await fn() //fn()会返回promise对象，原理一样
  console.log(res) //400
})()

大家请看如下代码，配合使用与传统axios请求的区别对照代码
传统使用：

        const result = axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks'
        }).then(function(books) {
            console.log(books);
        })
        console.log(result);

配套使用：

        toget.addEventListener('click', async function() {
            const result = await axios({
                method: 'get',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
                param: {
                    id: 1
                }
            })
            console.log(result);
        })

区别就在于，一个使用了回调函数（异步），另一个没有then做回调（同步写异步），最后结果都是一样的，但是更优雅。

五，res的结构赋值

以get请求为例：
如果我们发起get请求，返回值result是一个data对象，而data对象内部的data才是真正的数据：

真正数据的表示方法其实是data.data,略微麻烦，略微奇怪。如何避免这种写法——解构赋值，请看以下代码：

    <button class="toget">发起get请求</button>
    <button class="topost">发起post请求</button>
    <script>
        document.querySelector('.toget').addEventListener('click', async function() {
            const { data:res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
                param: {
                    id: 1
                }
            })
            console.log(res);
        })

        // 发起post请求
        document.querySelector('.topost').addEventListener('click', async function() {
            const { data:res } = await axios.post('http://www.liulongbin.top:3006/api/post',{
                data: {
                    name: 'zs',
                    age: 20
                }
            })
            console.log(res);
        })

我们令得到的data为res，则data.data就变成了res，而data.data就变成了res.data。
打印出来的res与之前的外层data是一样的，这样表示更加清晰。

六，总结

通过本节的学习我们了解到了axios的原理与使用方法，axios的优雅写法与res的结构赋值以及其中的道理。

希望这篇博客能够真正帮助到你！后期会考虑更新更多js原理的理解与使用，谢谢喜欢，欢迎关注！