vue（21）：前后端交互（获取后台数据）

接口调用方式

• 原生ajax
• 基于jQuery的ajax
• fetch
• axios

Promise

概述
Promise时异步编程的一种解决方案，从语法上将，Promise是一个对象，从它可以获取异步操作的消息

优点：

• 可以避免多层异步调用嵌套问题（回调地狱）
• Promise对象提供了简介的API，使得异步操作更加容易

基本用法：

• 实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务
• resolve和reject两个参数用于处理成功和失败两种情况，并通过then函数获取处理结果

格式：

var p=new Promise(function(resolve,reject){
	//成功调用resolve()
	//失败调用reject
})
p.then(function(ret){
	//从resolve得到正常结果
},function(ret){
	//从reject得到错误信息
})

实例：基本使用格式

var p = new Promise(function(resolve, reject) {
	setTimeout(function() {
		var flog = true
		if (flog) {
			//正常情况
			resolve('Hello')
		} else {
			//异常情况
			reject('错误')
		}
	}, 100)
})
p.then(function(ret) {
	console.log(ret)
}, function(ret) {
	console.log(ret)
})

实例：基于Promise发送Ajax请求

function queryData(url) {
	var p = new Promise(function(resolve, reject) {
		//ajax
		var xml = new XMLHttpRequest();
		xml.onreadystatechange = function() {
			if (xml.readyState != 4) return;
			if (xml.readyState == 4 && xml.status == 200) {
				resolve(xml.responseText)
			} else {
				reject('服务器错误')
			}
		}
		xml.open('GET', url);
		xml.send(null)
	})
	return p;
}
queryData('data.json').then(function(data) {
	console.log(data)
}, function(info) {
	console.log(info)
})

data.json是我在当前目录下写的一个json文件

发送多次Ajax请求
格式：

queryData(url)
	.then(function(data){
		return queryData()
	})
	.then(function(data){
		return queryData(url)
	})
	...
	;

url可以不相同

then参数中的函数返回值：

• 返回Promise实例对象，返回的该实例对象会调用下一个then
• 返回普通值，返回的普通值会之间传递给下一个then，通过then参数中函数的参数接收该值

实例方法

• p.then() 得到异步操作的正确结果
• p.catch() 获取异常信息
• p.finally() 成功与否都会执行

结构：

queryData(url)
	.then(function(data){
	})
	.catch(function(data){
	})
	.finally(function(data){
	})

对象方法

• Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果(所有异步任务的结果集)
• Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果（最先返回的那个结果）

结构：

Promise.all([p1,p2,p3]).then(data=>{
})

Promise.race([p1,p2,p3]).then(data=>{
})

fetch

特点：

• 更加简单的数据获取方式，功能更强大，更灵活，可以看作是Ajax的升级版
• 基于Promise实现

语法结构

fetch(url).then(fn1)
		  .then(fn2)
		  ....
		  .catch(fn)

实例

fetch('data.json').then(data => {
	return data.text() //固定格式
}).then(data => {
	console.log(data) //返回请求结果
})

注：text()方式是fetchApI中的一部分，它返回一个Promise实例对象，用于获取后台返回的数据

fetch请求参数

• method(String) ：HTTP请求方法，默认为get（get、post、put、delete）
• body(String)：HTTP的请求参数
• headers(Object)：HTTP请求头，默认为{}

get请求参数

//推荐
fetch('/abc?id=5'{
	method:'get'
}).then(data => {
	return data.text() //固定格式
}).then(data => {
	console.log(data) //返回请求结果
})
//或
fetch('/abc/5'{
	method:'get'
}).then(data => {
	return data.text() //固定格式
}).then(data => {
	console.log(data) //返回请求结果
})

post请求参数

fetch('/abc'{
	method:'post', //必须
	body:'name=张三&id=5', //必须
	headers:{
	'Content-Type':'application/x-www-form-urlencoded' //必须，指定返回的格式
	}
}).then(data => {
	return data.text() //固定格式
}).then(data => {
	console.log(data) //返回请求结果
})

响应数据格式：

• text()：返回字符串格式
• json()：返回json格式

axios

这篇文章可以看一下：axios的基本使用

特点：

• 支持浏览器和node.js
• 支持Promise
• 能来拦截请求和响应
• 自动转换JSON数据

cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在vue中使用

//局部使用
import axios from 'axios'
axios.get();
//全局使用，在main.js中注册
import axios from 'axios'
Vue.prototype.$axios = axios;
this.$axios.get();   //使用

基本用法

//get：查询数据
axios.get(url).then(ret=>{
	//data属性名称是固定的，用于获取后台响应的数据
	console.log(ret.data)
})
//get传参
axios.get('abc?id=5').then(ret=>{   
	//data属性名称是固定的，用于获取后台响应的数据
	console.log(ret.data)
})
axios.get('abc',{
	params:{
		id:123
	}
}).then(ret=>{
	//data属性名称是固定的，用于获取后台响应的数据
	console.log(ret.data)
})

//post:添加数据
axios.post('abc',{     //默认传递的是json格式的数据
	id:5,
	name:'张三'
}).then(ret=>{
	//data属性名称是固定的，用于获取后台响应的数据
	console.log(ret.data)
})

var params=new URLSearchParams();     //用于提交表单
params.append(key1,value1);
params.append(key2,value2);
axios.post('/abc',params).then(ret=>{
})

//put：修改数据
axios.put('abc',{     //默认传递的是json格式的数据
	id:5,
	name:'张三'
}).then(ret=>{
	//data属性名称是固定的，用于获取后台响应的数据
	console.log(ret.data)
})
//delete：删除数据
axios.delete('abc?id=5').then(ret=>{   
	//data属性名称是固定的，用于获取后台响应的数据
	console.log(ret.data)
})
axios.delete('abc',{
	params:{
		id:123
	}
}).then(ret=>{
	//data属性名称是固定的，用于获取后台响应的数据
	console.log(ret.data)
})

请求拦截器
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

 axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，例如在请求头中加入token
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

 axios.interceptors.response.use(function (response) {
    // 在接收响应做些什么，例如跳转到登录页
    ......
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

为axios实例添加拦截器

axios.interceptors.request.use(function (config) {/*...*/});

响应结果的主要属性

• data：实际响应回来的数据
• headers：响应头信息
• status：响应状态码
• statusText：响应状态信息

axios的全局配置

• axios.default.timeout = 3000 设置超时事件
• axios.default.baseURL = .... 设置默认请求地址
• axios.default.headers['value'] = ..... 设置请求头