对axios的基础认识与理解

Axios——基于Promise的一个库

axios相比jQuery来说，axios更加的轻便。

axios有以下特征：

1. 从浏览器中创建 XMLHttpRequest
2. 从 node.js 发出 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据

//axios的cdn
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.js"></script>

使用axios的例子（json来自http://jsonplaceholder.typicode.com/todos）

axios—get请求

get请求数据

		document.body.onload=()=>{
            axios.get("http://jsonplaceholder.typicode.com/todos").then((date)=>{
                console.log(date);
            }).catch((err)=>{
                console.log(err);
            })
        }
//控制台输出{data: Array(200), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

axios—post请求

post请求数据

	   document.body.onload=()=>{
            axios.post("http://jsonplaceholder.typicode.com/todos",{
                title:"Hello",
            }).then((date)=>{
                console.log(date);
            }).catch((err)=>{
                console.log(err);
            });
        }
//控制台输入{data: {…}, status: 201, statusText: "Created", headers: {…}, config: {…}, …}

axios—put请求

put更新数据

 		document.body.onload=()=>{
            axios.put("http://jsonplaceholder.typicode.com/todos/1",{
                userId:5,
                title:"Hello",
                completed: false
            }).then((date)=>{
                console.log(date);
            }).catch((err)=>{
                console.log(err);
            });
        }
//控制台输出{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

axios—patch请求

patch更新数据

 		document.body.onload=()=>{
            axios.patch("http://jsonplaceholder.typicode.com/todos/1",{
                userId:5,
                title:"Hello",
            }).then((date)=>{
                console.log(date);
            }).catch((err)=>{
                console.log(err);
            });
        }
//控制台输出{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

axios—delete请求

delete删除数据

 		document.body.onload=()=>{
            axios.delete("http://jsonplaceholder.typicode.com/todos/1").then((date)=>{
                console.log(date);
            }).catch((err)=>{
                console.log(err);
            });
        }
//控制台输出{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

axios—all请求

all同时发送大量的请求

 		document.body.onload=()=>{
            axios.all([
                axios.get("http://jsonplaceholder.typicode.com/todos/1"),
                axios.get("http://jsonplaceholder.typicode.com/todos/2")
            ]).then((date)=>{
                console.log(date);
            }).catch((err)=>{
                console.log(err);
            });
        }
//控制台输出(2) [{…}, {…}]，成功返回两个json

all请求后，多个json都在date形参里面，在axios中可以使用分发函数对多个json进行控制。

axios.spread();//分发函数

		document.getElementsByTagName('input')[0].onclick=()=>{
            axios.all([
                axios.get("http://jsonplaceholder.typicode.com/todos/1"),
                axios.get("http://jsonplaceholder.typicode.com/todos/2")
            ]).then(axios.spread((a,b)=>{
                console.log(a);
                console.log(b)}
                )).catch((err)=>{
                console.log(err);
            });
        }
//控制台分别输出
//{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
//{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

TRANSFORMING—请求&响应

将请求信息定义在一个对象内，需要时调用，也简化axios的写法

 		const options = {
            method: 'get',
            url:"http://jsonplaceholder.typicode.com/todos/2"
        }
        document.body.onload=()=>{
            axios(options).then((response)=>{
                console.log(response);
            }).catch((err)=>{
                console.log(err);
            })
        }
//控制台输出{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}