axios小记

Axios
本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。
具备以下特点：

• 在浏览器中创建XMLHttpRequest请求
• 在node.js中发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消要求
• 自动转换JSON数据
• 客户端支持防止CSRF/XSRF(跨域请求伪造)

安装及使用方式
npm安装 npm install axios 通过cdn引入也是可以的
在Vue项目的main.js文件中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

在组件中使用axios

<script>
	export default {
	   mounted(){
		 this.$axios.get('/goods').then(res=>{
		    console.log(res)
		      })
		  }
	   }
</script>

axios可以请求的方法
get, post, put, patch, delete 下面是get和post的例子

 //请求格式  http://localhost:8080/goods?id=1
this.$axios.get('/goods ',{
    		      params: {id:1}
                   }).then(res=>{
			  console.log(res.data);
		   },err=>{
			  console.log(err);
		   })	
                        或
this.$axios({
	 method: 'get',
	 url: '/goods',
    	 params: { id:1 }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})
				

this.$axios.post('/url',{
		 	id:1
		 }).then(res=>{
			 console.log(res.data);
		 },err=>{
			 console.log(err);
		 })
                 或
this.$axios({
	 method: 'post',
	 url: '/url',
    	 data: { id:1 }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})

axios 支持并发请求,同时进行多个请求，并统一处理返回值

 this.$axios.all([
	this.$axios.get('/goods'),
	this.$axios.get('/classify')
]).then(
	this.$axios.spread((goodsRes,classifyRes)=>{//当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
		console.log(goodsRes.data);
		console.log(classifyRes.data);
	})
)

下面我们创建一个axios实例

可以同时创建多个axios实例对象。

let instance = this.$axios.create({
			 baseURL: 'http://localhost:8080',
			 timeout: 2000
			})
			
instance.get('/goods').then(res=>{
	console.log(res.data);
 })
        
 let instance1 = this.$axios.create({
			 baseURL: 'http://localhost:8090',
			 timeout: 2000
			})
			
instance1.get('/goods').then(res=>{
	console.log(res.data);
})

  axios实例常用配置：

• baseURL 请求的域名，基本地址，类型：String
• timeout 请求超时时长，单位ms，类型：Number
• url 请求路径，类型：String
• method 请求方法，类型：String
• headers 设置请求头，类型：Object
• params 请求参数，将参数拼接在URL上，类型：Object
• data 请求参数，将参数放到请求体中，类型：Object

也可以做一些全局配置

//配置全局的超时时长
this.$axios.defaults.timeout = 1000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

当然请求时候也可以做配置

this.$axios.get('/goods',{
				timeout: 3000
			}).then()

以上配置的优先级为：请求配置 > 实例配置 > 全局配置

拦截请求和响应 请求拦截器

this.$axios.interceptors.request.use(config=>{
				// 发生请求前的处理

				return config
			},err=>{
				// 请求错误处理

				return Promise.reject(err);
			})

//或者用axios实例创建统一的拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
    return config
})

响应拦截器

this.$axios.interceptors.response.use(res=>{
				//请求成功对响应数据做处理

				return res  
			},err=>{
				// 响应错误处理

				return Promise.reject(err);
			})