当前位置: 首页 > 工具软件 > Axios > 使用案例 >

axios的详细讲解

廉博赡
2023-12-01

axios的特性

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,简单的理解就是ajax的封装。

特性:

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据

二 axios的安装

1、利用npm安装(例如vue脚手架项目中使用)

npm install axios

2、利用cdn(常用)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三 axios发送get、post请求

1、get请求

//get请求方式一:
axios({
		// 默认请求方式为get
		method: 'get',
		url: 'api',
		// 传递参数
		params: {
			key: value
		},
		// 设置请求头信息
		headers: {
			key: value
		}
		responseType: 'json'
	}).then((response) => {
		// 请求成功
		let res = response.data;
		console.log(res);
	}).catch((error) => {
		// 请求失败,
		console.log(error);
});

//get请求方式二:
axios.get("api", {
	// 传递参数
	params: {
		key: value
	},
    // 设置请求头信息,可以传递空值
	headers: {
		key: value
	}
}).then((response) => {
	// 请求成功
	let res = response.data;
	console.log(res);
}).catch(error => {
	// 请求失败,
	console.log(error);
});

2、post请求

//post请求方式一:
// 注:post请求方法有的要求参数格式为formdata格式,此时需要借助 Qs.stringify()方法将对象转换为字符串
let obj = qs.stringify({
	key: value
});
axios({
	method: 'post',
	url: 'api',
	// 传递参数
	data: obj,
	// 设置请求头信息
	headers: {
		key: value
	},
	responseType: 'json'
}).then((response )=> {
	// 请求成功
	let res = response.data;
	console.log(res);
}).catch(error => {
	// 请求失败,
	console.log(error);
});

//post请求方式二:
let data = {
	key: value
},
headers = {
	USERID: "",
	TOKEN: ""
};
// 若无headers信息时,可传空对象占用参数位置
axios.post("api", qs.stringify(data), {
	headers
}
}).then((response) => {
	// 请求成功
	let res = response.data;
	console.log(res);
}).catch((error) => {
	// 请求失败,
	console.log(error);
});

注意:
post请求的时候参数通过data进行传递
get请求的时候参数通过params进行传递

四 axios发送并发请求

主要用到两个函数:

axios.all([])

axios.spread()

//方法一:请求成功时响应的是一个数组
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.all([
        axios.get('http://localhost:8888/info'),
        axios.get('http://localhost:8888/infos') 
    ]).then((res) => {
        console.log(res[0]);  //第一个axios请求得到的
        console.log(res[1]);  //第二个axios请求得到的
    }).catch((err) => {
        console.log(err);
    })
</script>

//方法二:采用axios提供的spread函数处理响应数组结果
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.all([
        axios.get('http://localhost:8888/info'),
        axios.get('http://localhost:8888/infos')
    ]).then(axios.spread((res1,res2) =>{
        console.log(res1); //第一个axios请求得到的
        console.log(res2); //第二个axios请求得到的
    })).catch((err) => {
        console.log(err);
    })
</script>

五 axios的全局配置

首先通过axios.defaults.baseURL抽离出公共的部分,在各部分请求地址时可以省去公共的部分,适用于项目中所有的axios请求。

//baseURL的举例,还可以配置headers等
<script>
    axios.defaults.baseURL="http://localhost:8888/";
    axios.defaults.timeout=4000;
    axios.get("info").then(res=>{
        console.log(res);
    })
</script>

六 axios创建实例

项目中网络请求可能不止一个,可以通过创建多个axios实例进行不同的配置。

<script>
    //创建一个axios的实例
    let instance=axios.create({
        baseURL:"http://localhost:8888/",
        timeout:4000
    })
    //实例的使用
    instance({
        url: "info"
    }).then(res=>{
        console.log(res);
    })
</script>

axios的拦截器

axios提供了两种拦截器:

1、请求拦截器(成功,失败)

2、响应拦截器(成功,失败)

拦截器的作用:

1、在网络请求时发起请求

2、请求响应时对操作进行相应的处理

拦截器的使用案例:

1、请求拦截器成功时,可以添加网页加载的动画等

2、响应拦截器成功时,可以进行数据的相应处理

//定义了两个请求拦截器,两个响应拦截器,为了看运行流程
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
       //axios的请求拦截器,在axios进行网络请求之前触发
       axios.interceptors.request.use(
           config => {
               //在发送请求之前做些什么
               console.log("请求拦截器方向成功1");
               return config;   //请求拦截成功时必须返回config
           },
           error => {
               //对请求错误做些什么
               console.log("请求拦截器方向失败1");
               return Promise.reject(error);
           }
       )
       axios.interceptors.request.use(
           config => {
               console.log("请求拦截器方向成功2");  
               return config;   //请求拦截成功时必须返回config
           },
           error => {
               console.log("请求拦截器方向失败2");
               return Promise.reject(error);
           }
       )
       //axios的响应拦截器,在axios响应数据之前触发
       axios.interceptors.response.use(
           response => {
               //对响应数据做点什么
               console.log("响应拦截器方向成功1");
               return response;  //响应拦截器成功时必须返回response
           },
           error => {
               //对错误数据做点什么
               console.log("响应拦截器方向失败1");
               return Promise.reject(error);
           }
       )
       axios.interceptors.response.use(
           response => {
               console.log("响应拦截器方向成功2");
               return response;  //响应拦截器成功时必须返回response
           },
           error => {
               console.log("响应拦截器方向失败2");
               return Promise.reject(error);
           }
       )

        //axios发送get请求
        axios.get('http://localhost:8888/info').then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })
</script>

拦截器运行结果:
请求拦截器方向成功2
请求拦截器方向成功1
响应拦截器方向成功1
响应拦截器方向成功2
object

根据结果,我们看到请求拦截器后定义先运行,响应拦截器先定义先运行。

 类似资料: