前后端交互-promise

接口调用方式

原生ajax
基于jQuery的ajax：jQuery侧重于dom操作但是vue用不到
fetch
axios

promise：ES6引入，专门处理异步编程，解决回调地狱，语法上讲是一个对象可以获取异步操作的消息

var p = new Promise(function(resolve, reject) { //实例化Promise对象
	//成功时调用resolve()
	//失败时调用reject()
});
p.then(function(ret) { //通过p.then获取处理结果
	//从resolve得到正确结果
}, (function(ret) {
	//从reject得到错误信息
});//当多个then组成链式操作，如果上一个then中返回的是promise实例对象，下一个then得到上一个的结果，如果上一个then中返回的是普通值，下一个then中接收上一个的值

常用API：

实例方法
p.then()得到异步任务的正确结果
p.catch()获取异常信息
p.finally()成功与否都会执行（不是正式标准）

对象方法
Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果
Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果
()内添加数组，数组设置为调用函数创建的变量名

fetch：基于Promise实现，xhr升级版

fetch('url' , { 
			method: 'get',
			body:'携带参数',
			header: {
				'Content-Type': 'application/x-www-from-urlencoded',}
			}).then(function(data){ //method设置请求方式，将需要携带的参数添加到URL上或加到body上
			renturn data.text(); //text()方法属于fetchAPI的一部分，它返回一个Promise实例对象用于获取后台返回的数据
				})
			.then(fn3)
			...
			.catch(fn)

响应数据格式
text()将返回体处理成字符串类型
json()将返回结果和JSON.parse(responseText)一样

axios：基于Promise用于浏览器和node.js的HTTP客户端专门实现异步调用，不再有回调函数

axios.get('url', {
		params: {//get和delete通过params传参，pust和put不需要params，默认传递json格式数据
			id: 123
			}
		})
		.then( (ret) => {
		console.log(ret.data)//data属性名称是固定的，用于获取后台响应数据
		})

post/put传递参数
通过URLSearchParams传递（application/x-www-from-urlencoded）

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param1', 'value1');
axios.post('url', params).then( (ret) => {
		console.log(ret.data) //data属性名称是固定的，用于获取后台响应数据
})

axios响应结果
data：实际响应回来数据
headers：响应头信息
status：响应状态码
statusText：响应状态信息

axios全局配置
axios.defaults.timeout = 300; //超时时间
axios.defaults.baseURL = ‘URL’; //默认地址（重要）
axios.defaults.headers['mytoken'] = '请求头'; //设置请求头

axios请求拦截器

axios.interceptors.request.use( (config) => {
	//在请求发出前进行信息配置
	return config;
	}, (err) => {
	//处理响应的错误信息
	});

axios响应拦截器

axios.interceptors.response.use( (res) => {
	//在这里对返回数据进行处理
	return res;
	}, (err) => {
	//处理响应的错误信息
	});

async/await：ES7引入
async关键字用于函数上（async函数返回值是Promise实例对象）
await关键字用于async函数当中（await可以得到异步结果）

async function on(err) {
	const ret = await axios.get('url');
	const ret = await axios.get('url');//处理多个异步请求多添加await
	return ret;
}
on.then(ret => {})