Axios什么是Axios 首先需要知道：axios不是一种新的技术。 Axios 是一个基于 Promise 语法的、

什么是Axios

首先需要知道：axios不是一种新的技术。

Axios 是一个基于 Promise 语法的、用于浏览器和 Node.js 的 HTTP 库。简单的理解就是对 Ajax 的封装，且具有易用、简洁、高效等特点。

Axios特点

它本身具备以下作用：

可以从浏览器中创建 XMLHttpRequest。
能从 Node.js 创建 HTTP 请求。
支持 Promise API。
能够拦截请求和响应。
可以转换请求和响应数据。
也可取消请求。
可以自动转换 JSON 数据。
在客户端支持防止 CSRF/XSRF 攻击。

Axios安装方式

Axios 的安装与其他框架或插件类似，也是分为以下两种：

npm安装

npm install axios

使用

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

Axios的常用方法

执行get数据请求

axios.get('url',{
            params:{
                id:'接口配置参数（相当于url?id=xxx）',
            },
        }).then(function(res){
            console.log(res);// 处理成功的函数 相当于 success
        }).catch(function(error){
            console.log(error);// 错误处理 相当于 error
        })

执行post数据请求并发送给数据后端

 axios.post(
            "url",
            { data: {} },
            {
                headers: "xxxx",//头部配置
            }
        ).then(function (res) {
            console.log(res);
        }).catch(function (error) {
            console.log(error); axios.get('url', {
                params: {
                    id: '接口配置参数（相当于url?id=xxx）',
                },
            }).then(function (res) {
                console.log(res);// 处理成功的函数 相当于 success
            }).catch(function (error) {
                console.log(error);// 错误处理 相当于 error
            })
        })

通用方式（适用于任何请求）

//-------------------get-----------------------//
axios({
  method: "get",
  url: "xxx",
  cache: false,
  params: {
    id: 123,
  },
  headers: "xxx",
});
//-------------------post-----------------------//
axios({
  method: "post",
  url: "xxx",
  data: {
    firstName: "Tom",
    lastName: "Sun",
  },
});

Axios 与 Vue 的钩子函数的结合使用

假设有这样一个需求：”当页面加载后我们就要展示一组数据到页面中“。

如何实现？

-“将 axios() 方法的使用封装到 Vue 实例的 methods 中，并在适当时机调用！”

先将使用 axios() 方法异步请求数据的步骤封装在 methods 中：

methods:{
    getData(){
        axios.get('dataList.json')
        .then(res=>{
                this.dataList = res.data;
        })
    }
}

然后再选择适当的时机，让程序自动调用上面封装好的 getData 方法。

那么问题来了，那个可以“自动调用 methods 中方法”的适当时机在哪？😳

这个时候就有需要钩子函数了～ 😊

但是，这么多钩子函数那个具备呢？

我们回想一下可以发现，从 created 开始，我们就可以更新 data 中的数据了；beforeUpdate 和 update 中又不能执行对 data 的更新操作（因为会死循环）；beforeUnmount 和 unmounted 也不太合适（因为组件实例都要销毁了）；这么看来，合适的也只有 created、beforeMount 和 mounted 了。

事实证明这三个函数都可以，不过我们一般会在 created 和 mounted 中做数据更新的操作，因为这两个函数分别是“实例初始化完成”和“组件挂载完成”的最佳时机。

心急的同学可能会问了：那到底要用哪个呢？🤔

这里我们直接用 created 即可，因为这个时候组件还未挂载到 DOM 树上，并不会因为 data 中数据的更新而触发组件重新渲染一遍。😊

话不多说，直接上代码：
```
created(){
    this.getData();
},
```