axios是什么

1. 前端最流行的 ajax请求库
2. react/vue官方推荐使用axios发ajax请求
3. 文档 https://github.com/axios/axios

axios特点

1. 基于promise的异步ajax请求库
2. 浏览器端/node端都可以使用
3. 支持请求/响应拦截器
4. 支持请求取消
5. 请求/响应数据转换
6. 批量发送多个请求

axios中文文档

http://www.axios-js.com/

axios常用语法

axios安装

npm install axios

vue项目使用
在main.js

import axios from 'axios'
Vue.prototype.$ajax = axios

html 直接导入就行了

<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>

axios简单使用

默认get请求

// 配置默认基本路径
axios.defaults.baseURL = 'http://localhost:3000'

// 默认get请求
axios({
	url:"/posts",
	params:{
		id:1
	}
}).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

post

// post请求
axios.post("/posts",{id:1}).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

// 或

axios({
	url:"/posts",
	method:'post'
	data:{
		id:1
	}
}).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

put

axios.put("/posts/4",{
      "title": "json-server---1",
      "author": "typicode",
    }).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

// 或
axios({
	url:"/posts",
	method:'put '
	data:{
      "title": "json-server---1",
      "author": "typicode",
    }
}).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

delete

axios.delete("/posts/4",{
      "title": "json-server---1",
      "author": "typicode",
    }).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

// 或
axios({
	url:"/posts",
	method:'delete'
	data:{
		id:1
	}
}).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

axios难点语法

axios.create(config) 对axios请求进行二次封装

1. 根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置
2. 新的 axios 只是没有 取消请求 和 批量请求 的方法，其它所有语法都是一致的
3. 为什么要这种语法？
   1. 需求，项目中有部分接口需要的配置与另一部分接口的配置不太一样
   2. 解决：创建2个新的 axios ，每个都有自己的配置，分别对应不同要求的接口请求中

简单使用

const instance = axios.create({
   baseURL:"http://localhost:3000"
})

// 使用instance发请求
instance({
    url:"/posts"
})

// 或
instance.get("/posts")

同时请求 多个端口号

const instance = axios.create({
    baseURL:"http://localhost:3000"
})

const instance2 = axios.create({
    baseURL:"http://localhost:4000"
})

// 同时请求 端口号 3000 4000

// 使用instance发请求
instance({
    url:"/posts"
})

// 使用instance2发请求
instance2({
    url:"/posts"
})

axios的处理链流程 拦截器

拦截器简单使用

// 添加请求拦截器
axios.interceptors.request.use(config=>{
	// config 请求配置
	
	// 可用于
	// 发送网络请求时，在界面显示一个请求的同步动画
	// 某些请求（比如登录（token））必须携带一些特殊的信息
	
	// 请求成功拦截
    console.log("请求拦截器")
    return config
},err=>{
	// 请求失败拦截
    return Promise.reject(err)
})  

// 添加响应拦截器
axios.interceptors.response.use(res=>{
	// res 响应结果
	// 响应拦成功拦截
    console.log("响应拦截器")
    return res
},err=>{
	// 响应拦失败拦截
    return Promise.reject(err)
})  

console.log("开始请求")
axios.get("http://localhost:3000/posts")
.then(res=>{
    console.log("res:",res)
    console.log("请求结束")
})

多个拦截器

请求拦截器后添加先执行

// 添加请求拦截器
axios.interceptors.request.use(config=>{
    console.log("请求拦截器")
    return config
},err=>{
    return Promise.reject(err)
})  

axios.interceptors.request.use(config=>{
    console.log("请求拦截器--------2")
    return config
},err=>{
    return Promise.reject(err)
})  

axios.interceptors.request.use(config=>{
    console.log("请求拦截器--------3")
    return config
},err=>{
    return Promise.reject(err)
})  


// 添加响应拦截器
axios.interceptors.response.use(res=>{
    console.log("响应拦截器")
    return res
},err=>{
    return Promise.reject(err)
})  

axios.interceptors.response.use(res=>{
    console.log("响应拦截器---------2")
    return res
},err=>{
    return Promise.reject(err)
}) 

axios.interceptors.response.use(res=>{
    console.log("响应拦截器----------3")
    return res
},err=>{
    return Promise.reject(err)
})

console.log("开始请求")
axios.get("http://localhost:3000/posts")
.then(res=>{
    console.log("res:",res)
    console.log("请求结束")
})

取消请求

1. 基本流程

配置 cancelToken 对象
缓存用于取消请求的 cancel 函数
在后面特定时机调用 cancel 函数取消请求
在错误回调中判断如果 error 是cancel ，做相应处理

2. 实现功能

node运行server.js
安装node和express （npm install express）

var http = require("http");

var express = require("express")
// var server = http.createServer();
var app = express()

// node跨域设置
app.all("*",function(req,res,next){
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
})


app.get('/',function(res,req){
    console.log("获取客户端请求",res);
    // 延迟响应 方便测试取消接口
    setTimeout(function(){
        req.end("延迟响应 方便测试取消接口"); //响应客户数据
    },5000)
    
})

app.listen(4000,function(){
    console.log("服务器启动成功，可以通过 http://127.0.0.1:4000 进行访问")
})

在cmd窗口

node server.js

调用接口测试
axios.isCancel(err) //判断错误是否 是取消请求导致的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
</head>
<body>
    <script>
        let cancel;

        // axios({
        //     url:"http://localhost:4000",
        //     cancelToken:new axios.CancelToken(function(c){
        //         cancel = c
        //     })
        // })
        // 或

        axios.get("http://localhost:4000",{
            cancelToken:new axios.CancelToken(function(c){
                // c 用于取消当前请求的函数
                cancel = c
            })
        })
        .then(res=>{
            console.log("res:",res)
            cancel = null //请求完成，清空cancel
        },err=>{
            cancel = null 
            if(err.constructor.name === 'Cancel'){ //是取消请求导致的errer
                console.log("取消请求导致error:",err)
            }else{
                console.log("err:",err)
            }
			// 或
            // axios.isCancel(err) //判断错误是否 是取消请求导致的
        });

        setTimeout(function(){
            if(typeof(cancel) === 'function'){
                cancel('强制取消了请求')
            }else{
                console.log("没有可取消的请求")
            }
        },2000)
    </script>
</body>
</html>

正常请求

取消接口

在 请求拦截器里面统一添加取消请求

axios.interceptors.request.use(res=>{
  	res['cancelToken'] = new axios.CancelToken(function(c){
        cancel = c
    })
    return res
},err=>{
    return Promise.reject(err)
}) 

在 响应拦截器里面统一添加 处理取消请求

axios.interceptors.response.use(res=>{
  
    return res
},err=>{
	if(axios.isCancel(err)){
		// 中断promise链接
		return new Promise(()=>{})
	}else{
		// 把错误继续向下传递
    	return Promise.reject(err)
	}
}) 

代码简化 实现上一个接口还未响应 下一个接口开始请求，把上一个接口取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
</head>
<body>
    <script>
        let cancel;

        axios.interceptors.request.use(config=>{
            // 实现上一个接口还未响应  下一个接口开始请求，把上一个接口取消
            if(typeof(cancel) === 'function'){
                cancel('强制取消了请求')
            }
            config['cancelToken'] = new axios.CancelToken(function(c){
                cancel = c
            })
            return config
        },err=>{
            return Promise.reject(err)
        }) 

        axios.interceptors.response.use(res=>{
            cancel = null 
            return res
        },err=>{
            cancel = null 
            if(axios.isCancel(err)){
                console.log("取消上一个请求")
                // 中断promise链接
                return new Promise(()=>{})
            }else{
                // 把错误继续向下传递
                return Promise.reject(err)
            }
        })  
        function request(){
            axios.get("http://localhost:4000")
            .then(res=>{
                console.log("res:",res)
            },err=>{
                console.log("err:",err)
            });
        }
        
        request()
        request()
    </script>
</body>
</html>

请求前/后数据处理

// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
transformRequest:[function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
}],

// 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
}],

一：axios的基本使用，获取增删改

        1.axios调用的返回值是Promise实例。

        2.成功的值叫response，失败的值叫error。

        3.axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中

        4.携带query参数时，编写的配置项叫做params

        5.携带params参数时，就需要自己手动拼在url中,如下按钮5

<script src="./js/axios.min.js"></script>
<body>
<button id="btn1">点我获取所有人的信息</button>
<br>
<button id="btn2">点我获取某个人的信息</button>
<input id="person_id" type="text" placeholder="请输入一个人的id">
<br>
<button id="btn3">点我添加某个人的信息</button>
<input id="person_name" type="text" placeholder="请输入一个人的姓名">
<input id="person_age" type="text" placeholder="请输入一个人的年龄">
<br>
<button id="btn4">点我更新某个人的信息</button>
<input id="person_updata_id" type="text" placeholder="请输入要修改的id号">
<input id="person_updata_name" type="text" placeholder="请输入更新后的名字">
<input id="person_updata_age" type="text" placeholder="请输入更新后的年龄">
<br>
<button id="btn5">删除某人信息</button>
<input id="person_dele_id" type="text" placeholder="请输入要删除的id">

<script>
    const btn1 = document.getElementById('btn1')
    const btn2 = document.getElementById('btn2')
    const personId = document.getElementById('person_id')
    const btn3 = document.getElementById('btn3')
    const personName = document.getElementById('person_name')
    const personAge = document.getElementById('person_age')
    const personUpdataId = document.getElementById('person_updata_id')
    const personUpdataName = document.getElementById('person_updata_name')
    const personUpdataAge = document.getElementById('person_updata_age')
    const btn5 = document.getElementById('btn5')
    const personDeleId = document.getElementById('person_dele_id')
    // 1.获取所有人信息 --发送GET请求--  不携带参数
    btn1.onclick = async()=>{
        // 完整版
        axios({
            url:'http://localhost:5000/persons',   //请求地址
            method:'GET'     //请求方式
        }).then(
            // 学Promise时then里面的参数是value和reason，axios官方文档是 以下两个
            response => console.log('请求成功',response.data),
            error => console.log('请求失败',error)
        )
         
        // // 精简版   不能配置更多的属性
        // axios.get('http://localhost:5000/persons').then(
        //     response => console.log('请求成功',response.data),
        //     error => console.log('请求失败',error)
        // )

        // // 更精简版  只等待成功结果的版本 用 async 和 await
        // const res = await axios.get('http://localhost:5000/persons')
        // console.log(res.data)
    }

    // 2.获取某个人的信息 --发送GET请求-- 携带query参数  
    btn2.onclick = ()=>{
        // // 完整版
        // axios({
        //     url:'http://localhost:5000/person',
        //     method:'GET',
        //     params:{id:personId.value}   //此处写的是params，但携带的是query参数
        // }).then(
        //     response => {console.log('成功',response.data )},
        //     error => {console.log('失败',error)}
        // )

         // 精简版            带params
         axios.get('http://localhost:5000/person',{params:{id:personId.value}}).then(
             response => {console.log('成功',response.data)},
             error =>{console.log('失败')}
         )

    }

    // 3.添加某个人的信息 --发送POST请求-- 携带json编码参数 或 urlencoded编码   
    btn3.onclick = ()=>{
        // // 完整版
        // axios({
        //     url:'http://localhost:5000/person',
        //     method:'POST',
        //     data:{name:personName.value,age:personAge.value}
        // }).then(
        //     response => console.log('成功',response.data),
        //     error => console.log('失败',error)
        // )

        //精简版             不带data，直接写参数对象
        axios.post('http://localhost:5000/person',{name:personName.value,age:personAge.value}).then(
           response => console.log('成功',response.data),
           error => console.log('失败',error)
        )

    } 

    // 4.更新某个人的信息 --发送PUT请求-- 携带json编码参数 或 urlencoded编码
    btn4.onclick = () =>{
        // // 完整版
        // axios({
        //     url:'http://localhost:5000/person',
        //     method:'PUT',
        //     data:{id:personUpdataId.value,
        //           name:personUpdataName.value,
        //           age:personUpdataAge.value}
        // }).then(
        //     response => console.log('成功',response.data),
        //     error => console.log('失败')

        // )
        // 精简版
        axios.put('http://localhost:5000/person',{id:personUpdataId.value,name:personUpdataName.value,age:personUpdataAge.value}).then(
            response => console.log('成功',response.data),
            error => console.log('失败')  
        )
    }

    // 5.删除某个人的信息 --发送DELETE请求-- params参数没有对应的axios内置对象，我们要用模板字符串
    btn5.onclick = () =>{
        axios({
            url:`http://localhost:5000/person/${personDeleId.value}`,
            method:'DELETE',
            // params:{id:personDeleId.value}  这是错误的写法。。。不应该用params
        }).then(
            response => console.log('成功',response.data),
            error => console.log('失败')
        )
    }
</script>
</body>

二：axios常用配置项和axios.create

                axios.create(config)

                        1. 根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置

                        2. 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的

                        3. 为什么要设计这个语法?

                                需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样

	<body>
		<button id="btn">点我获取所有人</button><br/><br/>
		<button id="btn2">点我获取测试数据</button><br/><br/>
		<button id="btn3">点我获取笑话信息</button><br/><br/>

        
		<script type="text/javascript" >
			const btn = document.getElementById('btn')
			const btn2 = document.getElementById('btn2')
			const btn3 = document.getElementById('btn3')

            const axios2 = axios.create({
                timeout : 3000,
                // headers : {name:'yang'},   这台服务器不允许修改请求头headers，不是我代码的锅
                baseURL : 'https://api.apiopen.top'
            })

            //给axios配置默认属性 , 所有方法的超时时间都设置为2秒，请求头都是atguigu，请求的url通用路径
			axios.defaults.timeout = 2000
			axios.defaults.headers = {school:'atguigu'}
			axios.defaults.baseURL = 'http://localhost:5000'
            
            btn.onclick = ()=>{
				axios({
					url:'/persons', //请求地址
					method:'GET',//请求方式
					//params:{delay:3000},//配置query参数
					//data:{c:3,d:3},//配置请求体参数(json编码)
					//data:'e=5&f=6',//配置请求体参数(urlencoded编码)
					//timeout:2000,//配置超时时间
					//headers:{school:'atguigu'} //配置请求头
					//responseType:'json'//配置响应数据的格式(默认值)
				}).then(
					response => {console.log('成功了',response.data);},
					error => {console.log('失败了',error);}
				)
			}
		
			btn2.onclick = ()=>{
				axios({
					url:'/test1', //请求地址
					method:'GET',//请求方式
					//timeout:2000,//配置超时时间
					//headers:{school:'atguigu'} //配置请求头
				}).then(
					response => {console.log('成功了',response.data);},
					error => {console.log('失败了',error);}
				)
			}
			
            // 上面我们统一设置了 url 的开头为 'http://localhost:5000'
            // 但是我们下面的这个方法 url开头和默认设置的并不相同 ，此时用 axios.create方法重新创建一个axios2
            // 要配置在初始 axios 前面 
			btn3.onclick = ()=>{
				axios2({
					url:'/getJoke',
                    method:'GET'
				}).then(
                    response => {console.log('成功了',response.data);},
					error => {console.log('失败了',error);}
                )
			}
		</script>
	</body>

三：axios中的请求拦截器和响应拦截器

                axios请求拦截器

                    1.是什么？       在真正发请求前执行的一个回调函数

                    2.作用：     对所有的请求做统一的处理：追加请求头、追加参数、界面loading提示等等

               

                axios响应拦截器

                    1.是什么？        得到响应之后执行的一组回调函数

                    2.作用：

                            若请求成功，对成功的数据进行处理

                            若请求失败，对失败进行统一的操作

	<body>
		<button id="btn">点我获取所有人</button><br/><br/>
		<script type="text/javascript" >
			const btn = document.getElementById('btn')

			//请求拦截器
			axios.interceptors.request.use((config)=>{
				console.log('请求拦截器1执行了');
				if(Date.now() % 2 === 0){   
                    //如果当前时间戳整除2，
					config.headers.token = 'atguigu'
				}
				return config
			})

			//响应拦截器
			axios.interceptors.response.use(
				response => {
					console.log('响应拦截器成功的回调执行了',response);
					if(Date.now() % 2 === 0) return response.data
					else return '时间戳不是偶数，不能给你数据'
				},
				error => {
					console.log('响应拦截器失败的回调执行了');
					alert(error);   //弹出出错信息
					return new Promise(()=>{})   //中断promise链
				}
			)
			
            // 只要成功的结果，不成功也会有提示。因为在上面的响应拦截器里面写了
			btn.onclick = async()=>{
				const result = await axios.get('http://localhost:5000/persons21')
				console.log(result);
			}
		</script>
	</body>

四：axios中取消请求

五：axios.all批量发送请求

	<body>
		<button id="btn">点我批量发送请求</button><br/><br/>
		<script type="text/javascript" >
			const btn = document.getElementById('btn')

			btn.onclick = async()=>{
				axios.all([
					axios.get('http://localhost:5000/test1'),
					axios.get('http://localhost:5000/test2?delay=3000'),
					axios.get('http://localhost:5000/test3'),
				]).then(
					response => {console.log(response);},
					error => {console.log(error);}
				)
			}
		</script>
	</body>

axios.create()是添加了自定义配置的新的axios

1.用axios发送请求

axios({
	method:'POST',
	url:'http://localhost:8080/login',
	data
})

2.用axios.create创建一个新的axios发请求

cosnt instance = axios.create({
    baseURL:'http://localhost:8080/' //基础路径
})

instance({
	url: '/login',
    method: 'POST',
    data: res
})
// 1.可以简化路径写法 2.当基础路径发生变化时方便修改，有利于维护