axios的详细讲解

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

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