VUE学习笔记（十）：axios

一、axios的请求方式

axios(config)
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

二、安装

进入项目文件夹：

npm insatall axios --save

三、使用

import axios from 'axios'
axios({
	url:"https://httpbin.org/"   //专门做网络请求模拟的网站
	method:'get'   //默认是get请求,也可以指定请求方式
}).then(res =>{
	console.log(res);
})

axios({
	url:"https://www.baidu.com/"   默认是get请求
	///专门针对get请求的参数拼接
	params:{
		type:"pop",
		page:1
	}
}).then(res =>{
	console.log(res);
})
利用post方式带参请求时写法如下：
data:{id:10012}

四、axios 发送并发请求

//使用axios.all 可以放入多个请求的数组
axios.all(
	 [axios({url:"https://www.baidu.com/"}),
	 axios({
	 url:"https://www.baidu.com/",
	 params:{
		type:'sell',
		page:5
		  }
	    })
	   ]
	  ).then(result => {
	console.log(results);
	console.log(results[0]);
	console.log(results[1]);
})
//axios.all([])返回的结果是一个数组，使用axios.spread 可将数组[res1,res2]展开为res1,res2
axios.all([axios({
	url:"https://www.baidu.com/"
}),axios({
	url:"https://www.baidu.com/",
	params:{
		type:'sell',
		page:5
	}
})]).then(axios.spread((res1,res2) => {
	console.log(res1);
	console.log(res2);
}))

五、axios 实例的封装

1、首先单独创建一个文件夹用于封装网络请求src --> network ，创建文件 index.js 或 request.js
2、在文件里写如下代码

import axios from 'axios'
export function request(config){
	const instance = axios.create({
		baseUrl:'http://192.168.1.110:8000',
		timeout:5000
	})
	return instance(config)
}

3、组件里使用网络请求

request({
	url:'home/category'
}).then(res => {
	console.log(res);
}).catch(err => {
	console.log(err);
})

4、还可以在network里封装多个文件用于分别存放各个页面的网络请求的代码如：
src -> network -> home.js 用于首页页面的网络请求，代码如下：

import {request} from "./request"
export function getHomeData(id){
	return request ({
		url:'api/data/home',
		params:{
			id
		}
	})
}

然后在home页面组件里：

<script>
import {getHomeData} from "network/home"
created(){
	getHomeData(id).then(res=>{
		console.log(res)
	})
}
</script>

六、axios 拦截器

axios.interceptors.request.use(config =>{  //请求成功的拦截
	console.log(config);
	return config
},err => {   //请求失败的拦截
	console.log(err);
})


axios.interceptors.response.use(res =>{  //响应成功的拦截
	console.log(res);
	return res
},err => {   //响应失败的拦截
	console.log(err);
})