axios框架的使用（vue中的使用）

axios网络请求框架

axios框架全称（ajax – I/O – system）

主要的功能：

## 1.在浏览器发送（XMLRequest网络请求） 2.在node.js中发送http/https网络请求 3.支持Promise API 的应用 4.请求的拦截和响应的拦截 5.转换请求和响应数据 6.以及其他功能

网络请求

1.基本的请求方式

axios(config)

axios.request(config)
 
axios.get(url[config])
 
axios post(url[data[config]])

2.axios的安装(前提条件是安装 node.js环境)

npm  install axios --save

3.导入axios的框架进行使用

improt axios from 'axios'

4.axios的请求方式

GET：请求的编码方式

axios({
	url:'http:xxxxxxxxxxxxxx',  //请求url的路径
	method:'get'						//请求方式
	params:{							//这里是自己的参数
			xxx:'xxxxxxx' 
	}
}).than((res)=>{
		//成功的回调
}).catch((err)=>{
		//失败的回调
})

POST：请求的方式方式

axios({
	url:'http:xxxxxxxxxxxxxx',  //请求url的路径
	method:'post'						//请求方式
	data:{							//这里是自己的参数
			xxx:'xxxxxxx' 
	}
}).than((res)=>{
		//成功的回调
}).catch((err)=>{
		//失败的回调
})

5.axios.all()的使用

具体使用方式：Promis()的使用，解决回调地狱的问题以及解决多个异步请求完成加载的问题

axios.all([axios(),axios(),axios()...]).than((res)=>{
	//成功的回调
}).catch((err)=>{
	//失败的回调
})

回调的到的会是多个数组的返回例如：
多个请求对应多个对象的返回值

res=[{name:'eric',age:'12',sex:'1'},{name:'kobi',age:'42',sex:'1'}....]

6.axios 的全局配置

axios.defaults.baseURL='https:\\xxxxxxxxxxxx'

7.axios请求的网络封装

定义请求实例：

const axiosRequest =  axios.create({
	baseURL:'http://xxxxxxxxx', 	//请求URL
	timeout:5000,			//请求超时时间设置
	headers:{}    			//请求头数据
})

在调用实例时：

axiosRequest({ 
	URL:'/login',    //集体的接口
	method:'get',  //请求方式
	params:{}     //具体的请求参数  （如果是post请求请使用data进行传参）
})

8.请求拦截、响应拦截

根据不同的业务需求进行请求拦截和响应拦截做对应的处理

axiosRequest.interceptors.request.use(config=>{
		//请求拦截的具体操作
})

axiosRequest.interceptors.response.use(config=>{
		//响应拦截的具体操作
})

最后建议大家在开发中，尽量将axios的框架进行抽离封装，降低耦合度，对于项目的维护以及开发更方便。