axios

认识axios

• Axios 简单的理解就是ajax 的封装
• Axios 是一个基于 promise 的 HTTP 库
• 支持node 端 和浏览器端
• 使用Promise 管理异步，告别传统 callback方式
• 丰富的配置项，支持拦截器等高级配置
• 转换请求数据和相应数据

为axios 应用准别接口案例

• 项目的两种编程方式——模板式编程和接口式编程
  RestFul API 规范（URL,HTTP,版本，状态码，返回值，请求条件等规范）
  - GET (SELECT): 从服务器取出资源（一项或多项）
  - POST(CREATE) : 在服务器新建一个资源
  - PUT (UPDATE) : 在服务器更新资源(客户端提供改变后的完整资源)
  - PATCH(UPDATE): 在服务器更新资源（客户端提供改变的属性）
  - DELETE(DELETE):从服务器删除资源

ES6中 Promise 的原理和应用

• 主要用于异步计算
• 可以将异步操作对列化，按照期望的顺序执行，返回符合预期的结果
• 可以在对象之间传递和操作 promise ，帮助我们处理队列
• 异步回调的问题：
  - 之前处理异步是通过纯粹的回调函数的形式进行处理
  - 很容易进入到回调地狱中，剥夺了函数 return的能力
  - 问题可以解决，但是难以读懂，维护困难
  - 稍有不慎就会踏入回调地狱-嵌套层次深，不好维护
• promise
  - promise 是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
  - 并未剥夺函数return 的能力，因此无需层层传递 callback，进行回调获取数据
  - 代码风格，容易理解，便于维护
  - 多个异步等待合并便于解决

new Promise((resolve,reject)=>{
	console.log("这是第一层");
	resolve("这是第二层");
	
}).then(res=>{
	console.log(res);
	//return Promise.resolve('这是第三层')
	return {mess:"这是第三层"}
}.err=>{
	console.log(err);
}).then(res =>{
	console.log(res.mess)
})
//并发请求
Promise.all([
	new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve('这是第一个请求')
		},1000)
	}),
	new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve('这是第二个请求')
		},1000)
	}),
]).then(res =>{
	console.log(res.mess)
});

axios 的入门应用

• 以CDN 的静态资源方式引入
• 发送GET 请求（默认的方法）
• 发送post 请求

axios({
	url:'url?a=1111&b=2222',
	method:'get',
	params:{
		name:'username',
	}
}).then(res=>{
	console.log(res)
})

axios({
	method:'post',
	url:'url',
	headers:{
		'content-type':'application/x-wwww-form-urlencoded'
	},
	data:{
		name:'username',
		age:'30',
		sex:'aaa'
	}
}).then(res =>{
	console.log(res)
})

axios.get('url?id=1').then(res =>{
	console.log(res)
})
axios.get('url',{params:{id:1}}).then(res =>{
	console.log(res)
})
axios.post('url',"name=测试&url=eduwork&do_submit=yes").then(res =>{
	console.log(res)
})

axiox.all([
axios.get('url?id=1');
axios.get('url?id=2');
axios.get('url?id=3');
]).then(
//res=>{}
	axios.spread((res1,res2,res3)=>{
		
	})
)

axios 的全局配置方案

• 做完全局配置之后在发送axios 请求时就简单了
• axios.default.baseURL=“http://127.0.0.1”;
• axios.default.timeout=5000;
• axios.default.headers.post[‘content-type’]=application/x-www-form-urlencoded’;
• //整理数据
  axios.defaults.transformRequest=function(data){
  data= JSON.stringify(data);
  return data;
  }

axios 的实例封装

• 有时候后台接口地址有多个并且超时时长不一样，我们不可能在axios中把每个后台请求的域名地址都拼接在URL中，并且在axios 中的config 写不同的超时时长，很繁琐，这个时候可以用到axios 实例，在实例中可以配置这两种参数。
• 假如新建了一个axios 实例但是没有参数，取得就是全局的配置值，实例中如果有则优先取实例中的
• axios 实例的相关配置（config 参数）
  - baseURL :请求的域名基本地址（如：http://localhost:8080）
  - timeout: 后端定义的超时时长（默认值 1000ms）
  - url：请求的路径（如：/data.json）
  - methos: 请求方法（get、post）
  - headers：设置请求头
  - params: 请求的参数拼接在url 中
  - data：请求的参数放在request body 中

let local=axios.create({
	baseURL:'http://localhost:8080',
	timeout:5000
});
let test=axios.create({
	baseURL:'http://test.com',
	timeout:3000
});

axios 的拦截器应用

• 为每个请求都带上的参数，比如时间戳等。
• 对返回的状态进行判断 ,比如是否过期

//请求拦截器
axios.interceptors.request.use(
	config =>{
		//每次发送请求之前判断是否存在token
		//如果存在，则统一在http请求的header都加上token，这样后台根据判断你的登陆情况
		//即使本地存在token，也有可能token 过期，所以在相应拦截器中要对返回的状态进行判断
		const token=window.localStorage.getItem("token")
		token && (config.headers.Authorization=token);
		return config;
	},
	error =>{
		return Promise.error(error)
	}
);
axios.interceptors.response.use(config=>{
		return config.data;
	},
	
	//然后根据返回的状态码进行一些操作，例如登陆过期 提示错误等等
	error =>{
		console.log(error)
})