2.axios的基本使用，获取增删改，常用配置项和axios.create，请求拦截器和响应拦截器，取消请求和axios.all批量发送请求

最新推荐文章于 2025-09-24 11:53:59 发布

原创最新推荐文章于 2025-09-24 11:53:59 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #前端

ajax\promise\axios 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了axios的使用方法，包括GET/POST/PUT/DELETE请求示例，创建axios实例、配置请求拦截器和响应拦截器，以及取消请求和批量发送。重点讲解了如何根据不同场景定制axios配置，以及请求/响应处理技巧。

一：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>