Axios基础操作：GET,POST,PUT,DELETE请求与参数处理-CSDN博客

本文链接：https://blog.csdn.net/Iriscaos/article/details/133242765

AXIOS

常见的请求方式

一共是八种，但我们常见的只有4种

GET 查天生没有请求体，无法携带请求体参数

POST 增

PUT 改

DELETE 删

常见的请求参数

query参数（查询字符串参数）

params参数

请求体参数（json编码、urlencoded编码）

用axios发送get请求

准备工作

在BootCDN中查找到axios下载并引入

<script type="text/javascript" src="对应文件引入路径"></script>

用axios发送get请求

get请求无参数

简写形式

<body>
	<button onclick="test1()">获取所有人（get请求--不传参数）</button>
	<script type=text/javascript>
        function text1(){
        	let result =axios.get("粘贴复制对应地址")
        	//此时result返回的是一个pending状态的promise实例
    }
    </script>
</body>

<body>
	<button onclick="test1()">获取所有人（get请求--不传参数）</button>
	<script type=text/javascript>
        async function text1(){
        	let result = await axios.get("粘贴复制对应地址")
        	//此时result返回的是一个axios封装的对象，里面包含很多信息，其中服务器返回给我们的信息在data中
            console.log(result.data) //{state:1,msg:'获取成功',data:Array(3)}
        	//如果想直接要数据，则需要 result.data.data
    }
    </script>
</body>

完整写法

<body>
	<button onclick="test1()">获取所有人（get请求--不传参数）</button>
	<script type=text/javascript>
        async function text1(){
        	let result = await axios（{
                url:'粘贴复制对应地址',
                method:'GET'
            }）
    }
    </script>
</body>

get请求query参数

案例：根据学员id，获取某一个学员信息

方法一：简单写法，query参数直接拼在路径中

async function text2(){
    //此方法为错误写法，因为固定了id值，需直接写需要查找的学员id，获取学员的个人信息
    let result = await axios.get('对应路径？id=123456')
}

方法二：简单写法，靠配置项，指定query参数，携带query参数时，配置项叫params！！！！！！

async function text2(){
    let result = await axios.get('对应路径',{
        params:{
            id:'对应学员id'
        }
    })
}

方法三：完整写法

async function text2(){
    let result = await axios({
        url:'对应路径',
        method:'GET',
        params:{
            id:'对应学员id'
        }
    })
}

get请求params参数

案例：根据人员年龄（age）获取一些人

方法一：简单写法，只能自己拼

async function text3(){
    let result await axios.get('对应路径')
    //需将路径中的age更改为想要查找的具体数字
}

方法二：完整写法

async function text3(){
    let result = await axios({
        url:'对应路径/params参数值'，
        method:'GET'
    })
}

用axios发送post请求

post请求，请求体参数

案例：根据姓名和年龄，添加一个人

方法一：简单写法，json编码的请求体参数

async function text4(){
    //post内有两个参数，参数一是对应路径url，参数二是请求体参数
    let result = await axios.post('对应路径',{name:'困困',age:18})
    //此时result的值为添加成功的返回值，并包含添加人信息
}

方法二：简单写法，urlencoded编码的请求参数

async function text4(){
    let result = await axios.post('对应路径','name=老八&age=37')
}

方法三：完整写法，json编码的请求体参数

async function text4(){
    let result = await axios({
        url:'对应地址'，
        method:'POST',
        data:{name:'邱邱',age:25}
    })
}

方法四：完整写法，urlencoded编码的请求参数

async function text4(){
	let result = await axios({
        url:'对应地址',
        method:'POST',
        data:'name=邱邱&age=25'
    })
}

用axios发送put请求

案例：根据学员id，学员姓名，学员年龄，更新一个学员信息

方法一：简单写法，json编码的请求体参数

async function text5(){
    let result = await axios.put('对应地址',{id:'XXX',name:'XXX',age:XX})
}

方法二：简单写法，url’encoded编码的请求参数

async function text5(){
    let result = await axios.put('对应地址','id=XXX&nameXXX&age:XX')
}

方法三：完整写法，json编码的请求体参数

async function text5(){
    let result = await axios({
        url:'对应地址',
        method:'PUT',
        data:{
            id:'XXX',
            name:'XXX',
            age:XX
        }
    })
}

方法四：完整写法，urlencoded编码的请求参数

async function text5(){
    let result = await axios({
        url:'对应地址',
        method:'PUT',
        data:'id=XXX&name=XXX&age=XX
    })
}

用axios发送delete请求

案例：根据学员id，删除一个学员

方法一：简单写法，json编码的请求体参数

async function text6(){
    let result = await axios.delete('对应地址',{data：{id：'对应学员id值'}})
}

如果需要传递一个数组，则需要包裹在data中进行编写

async function text6(){
    let result = await axios.delete('对应地址',{data:[1,2,3]})
}

方法二：简单写法，urlencoded编码的请求参数

async function text6(){
    let result = await axios.delete('对应地址',data:'id=对应学员id')
}

方法三：完整写法

async function text6(){
    let result = await axios({
        url:'对应地址',
        method:'DELETE',
        data:{
            {data：{id：'对应学员id值'}
        }
    })
}

拦截器

在请求或响应被then或catch处理前拦截它们

请求拦截器

可以简单理解为地铁进站安检，在你想要发请求前，统一增加要做的某件事情

//添加请求拦截器
axios.interceptors.request.use((config)=>{
    //在发送请求前要做的事情，例如给发送的地址进行简写拆分
    return config;
},function(error){
    //对请求错误做些什么
    return Promise.reject(error);
});

响应拦截器

可以简单理解为火车出站的案件，在下车出站时再次进行安检

//添加相应拦截器
axios.interceptors.response.use(
	//响应成功的回调
	(res)=>{
    	return res.data//此值将会赋值给let result = await axios.get('对应路径')的result，相当于帮助程序员取出相应成功返回值的值
	}
	//响应失败的回调
	(error)=>{
    	return Promise。reject(err)//直接返回err最后的结果时axios成功，必须要返回一个失败的Promise实例
    	//或return new promise()=>{}  直接中断promise链，此时便可不需要太try catch
	}//此时可以将axios请求写在try catch里面，以便于获取错误值
)