axios总结异步请求骚操作

最新推荐文章于 2025-05-25 10:42:07 发布

原创最新推荐文章于 2025-05-25 10:42:07 发布 · 475 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #axios #交互

前端交互同时被 2 个专栏收录

13 篇文章

订阅专栏

ECMAScript6

4 篇文章

订阅专栏

本文详细介绍了Axios库的基本使用方法及高级特性，包括GET、POST等HTTP请求方式的多种参数传递方式，响应结果的解析，全局配置设置，以及请求和响应拦截器的使用。

概述

三方调用方式js库,基于promise，强力max。

基本用法

axios.get(url).then(ret =>{
	console.log(ret.data);//data属性固定写法
})

常用API

POST / GET / PUT / DELETE
一、GET

//url传递参数
axios.get('***?id=123').then(ret => {
	console.log(ret.data);
})

//restful方式传参,一系列传参方式改变，后台都需要改动
axios.get('***/123').then(ret => {
	console.log(ret.data);
})

//params方式
axios.get('***',{
	params:{
		id:'123'
	}
}).then(ret => {
	console.log(ret.data);
})

二、POST
默认传递json格式

//通过选项传递参数
axios.post('***',{
	name:'abc',
	pwd:'123'
}).then(ret => {
	console.log(ret.data);
})

//通过urlSearchParams传递参数
//（application/x-www-form-urlencoded）
const params = new urlSearchParams();
params.append('name','abc');
params.append('pwd','123');
axios.post(url,params).then(ret => {
	console.log(ret.data);
})

其他两个delete\put不说了，跟get\post类似，百度吧。。。敲不动了

响应结果

主要属性：
data 实际响应返回数据
headers 响应头信息
status 响应状态码
statusText 响应状态信息

axios.post(url).then(ret => {
	console.log(ret);
})

打印如下：
ret返回结果

全局配置

超时时间
axios.defaults.timeout = 3000 ;
默认地址
axios.defaults.baseURL = ‘******’;

axios.defaults.baseURL = ' http://localhost:8888';
axios.get('axios-url').then(ret => {//url前面的省略
	console.log(ret);
})

设置请求头
axios.defaults.headers[‘mytoken’] = ‘******’;

//跨域的请求头需要后台配置
axios.defaults.headers['mytoken'] = 'helloworld';
axios.get(url).then(ret => {
	console.log(ret);
})

axios拦截

一、请求拦截器
aioxs----->拦截器----->服务器

//添加请求拦截器
axios.interceptors.request.use(function(config){
	console.log(config.url)
	//在请求发出之前进行一些信息配置
	config.headers.mytoken = 'hellokugou'
	return config;
},function(error){
	//处理相应错误信息
})
axios.get(url).then(function(data){
	console.log(data);
})

data打印结果

二、响应拦截器
axios<-----拦截器<-----服务器
数据返回之前进行加工处理

//添加请求拦截器
axios.interceptors.respons.use(function(res){
	console.log(res)
	var data = res.data;//把数据处理了一下
	return data;
},function(error){
	//处理相应错误信息
})
axios.get(url).then(function(data){
	console.log(data);//不需要再通过.data获取数据，可以直接取到
})