什么是Axios

Axios 是一个基于promise的http库

特性

• 支持promise API
• 拦截请求和相应
• 转换请求数据和相应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF攻击

兼容性：主流浏览器都兼容，IE支持8以上

常用请求方法

get，post，put，patch，delete

get：获取数据

axios.get('/data.json').then((res) => {console.log(res)})
//带有参数的情况
//最终请求路径 http://localhost:8080/data.json?id=12
axios.get('/data.json', {
		params:{
			id:12
		}
	}).then((res) => {console.log(res)})
//第二种写法
axios（{
	method: "get",
	url: '/data.json',
	params:{ id:12 }
}）

post：提交数据（表单提交+文件上传）

//提交数据的格式有两种
//content-type:application/json （目前常用,以json形式发送）
let data = { id: 12 }
//别名写法
axios.post('/post', data).then((res) => {console.log(res)})
//
//第二种写法
axios({
	method:'post',
	url:'/post',
	data:data  //传输的数据放入请求体中
}).then((res) => {console.log(res)})



//form-data 表单提交 (文件上传，图片上传)
let formData = new FormDate()
for( let key in data){
	formData.append(key, data[key])
}
axios.post('/post', formData)

第一种提交数据的格式

请求体格式

第二种提交数据格式

put：更新数据（所有数据都推送到服务端）

axios.put('/put', data).then((res) => {console.log(res)})

patch：编辑更新数据（只将修改的数据推送到服务端（如果数据量很大，而只是修改很少的部分，推荐使用））

axios.put('/put', data).then((res) => {console.log(res)})

注意：put和patch与post的差别只是Request Method不同，意思就是你用post代替他们效果是一样的，但是不符合规范

delete：顾名思义删除数据

//数据在url上传输
axios.delete('/delete', {
	params: { id:12 }
}).then((res) => {console.log(res)})
//数据在请求体上传输
axios.delete('/delete', {
	data: { id:12 }
}).then((res) => {console.log(res)})

//第二种写法
axios({
	method:'delete',
	url:'/delete',
	data:data  //
}).then((res) => {console.log(res)})

并发请求：

同时进行多个请求，并统一处理返回值

axios.all([//并发请求放在数组中
		axios.get('url1'),
		axios.get('url2')
	]).then(
		axios.spread((data1, data2) => {//参数就是all方法并发请求的顺序返回值
		console.log('data1')
		console.log('data2')
	})
	)

其实并发请求在物理层面上也是有先后顺序的，与你写的请求先后顺序有关，它不是并行，只是逻辑上同时请求

axios在vue中的实例

//当你请求的后端不止一个域名的时候，可以创建axios实例
let instance = axios.create({
		baseURL:"http://localhost:8080",//配置默认的请求后端域名，基本地址
		timeout: 1000 //请求超时时长，单位毫秒
		url:'' //请求路径，拼接在baseURL之后
		method:'',//请求方法
		headers:{  //请求头
			token:''//设置token
		}, 
		params:{}  //请求参数拼接在url
		data: {}  //请求参数放在请求体
	})
//使用这个实例
instance.get()

let instance2 = axios.create({
		baseURL:"http://localhost:8081",
		timeout: 2000 
	})
//使用这个实例
instance2.get()

axios配置

• 全局配置

axios.defaults.参数（作用域为所以axios请求，优先级最低）

• 实例配置

axios.create({添加配置参数（作用域为该实例的所有请求，优先级第二）})

• 请求配置

axios.get('/data.json', {添加配置参数（作用域为当前请求，优先级最高）})

拦截器

请求或响应被处理前拦截它们
分为 请求拦截器和响应拦截器两种

//请求拦截器
axios.interceptors.request.use(
		config => {
			//在发送请求前做的事情
			return config
		}, err => { //在请求错误 如404 not found 401超时 的时候做的事情 
			return Promise.reject(err)
	})
//响应拦截器
axios.interceptors.response.use(
		res => {
			//请求成功对响应数据做处理
			return res //会返回到具体的请求方法作为.then()的参数
		}, err => { //在响应错误 如500系统错误，502系统重启 的时候做的事情 
			return Promise.reject(err)//会返回到具体的请求方法作为.catch()的参数
	})

错误处理

请求错误时进行的处理 axios.catch(err => {})
一般在实际开发中，添加统一的错误处理，也就是拦截器

取消请求

用于正在进行的http请求

//定义取消请求
let source = axios.CancelToken.source()
axios.get('/path', {
	cancelToken: source.token
}).then(res => {console.log(res)})
  .catch(err => {console.log(err)})

//取消请求
source.cancel('cancel http') //参数会传到需要取消请求的catch的err中