Vue前端交互
Promise
1.promise的实例方法
1).then() 得到异步任务正确的结果
2).catch() 获取异常信息
3).finally()成功与否都会执行（不是正式标准）
1.promise return 一个普通值会默认创建一个新的promise对象然后调用
2.promise 中的finally，不论成功与否，都会调用，但是.finally(function(data){console.log(data)})中的data是undefined，是没有数据的
列子1：
<script type="text/javascript">
/*
基于Promise发送Ajax请求
*/
function queryData(url) {
var p = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
// 处理正常的情况
resolve(xhr.responseText);
}else{
// 处理异常情况
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
return p;
}
// queryData('http://localhost:3000/data')
// .then(function(data){
// console.log(data);
// },function(info){
// console.log(info)
// });
// ============================
// 发送多个ajax请求并且保证顺序
queryData('http://localhost:3000/data1')
.then(function(data){
console.log(data)
return queryData('http://localhost:3000/data2')
})
.then(function(data){
console.log(data);
console.log('-----------------------------------------------------')
return 'xiaoming'
})
.then(function(data){
console.log(data);
})
.finally(function (data) {
// body...
console.log('haha')
})
</script>
2.promise的对象方法
1).all()
`Promise.all`方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用`Promise.resolve`转换为一个promise)。它的状态由这三个promise实例决定
(会把p1,p2,p3都执行了)
2).race()`Promise.race`方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为`fulfilled`或`rejected`），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
(p1,p2,p3中的一个执行了，另外两个会继续发送，但不会执行函数内容)
all和race好像不能同时使用？
fetch
1.概述
Fetch API是新的ajax解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象
fetch(url, options).then(）
例子1：
<script type="text/javascript">
/*
Fetch API 基本用法
fetch(url).then()
第一个参数请求的路径 Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果
*/
fetch('http://localhost:3000/fdata').then(function(data){
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
return data.text();
}).then(function(data){
// 在这个then里面我们能拿到最终的数据
console.log(data);
})
</script>
2.fetch API 中的 HTTP 请求
fetch(url, options).then(）
HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
1.默认的是 GET 请求
2.需要在 options 对象中指定对应的 method method:请求使用的方法
3.post 和 普通 请求的时候 需要在options 中设置请求头 headers和body
这边也分'Content-Type': 'application/x-www-from-urlencoded'和'application/json'
所以服务器也分app.use(bodyParser.json())和app.use(bodyParser.urlencoded({ extended: false }));
例子2:
<script type='text/javascript'>
fetch('http://localhost:3000/fdata').then(function (argument) {
// body...
return argument.text()
}).then(function (argument) {
// body...
console.log(argument)
})
fetch('http://localhost:3000/books?id=123',{method:'get'}).then(function (argument) {
// body...
return argument.text()
}).then(function (argument) {
// body...
console.log(argument)
})
fetch('http://localhost:3000/books1/123',{method:'get'}).then(function (argument) {
// body...
return argument.text()
}).then(function (argument) {
// body...
console.log(argument)
})
fetch('http://localhost:3000/books2/123',{method:'delete'}).then(function (argument) {
// body...
return argument.text()
}).then(function (argument) {
// body...
console.log(argument)
})
POST请求传参
fetch('http://localhost:3000/books3', {
method: 'post',
body: JSON.stringify({
uname: '张三',
pwd: '456'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data){
return data.text();
}).then(function(data){
console.log(data)
});
fetch('http://localhost:3000/books1/123', {
method: 'put',
body: JSON.stringify({
uname: '张三',
pwd: '789'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data){
return data.text();
}).then(function(data){
console.log(data)
});
</script>
3.fetchAPI 中 响应格式 响应结果分为text和JSON
用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如`JSON`，`BLOB`或者`TEXT`等等
例子3：
fetch('http://localhost:3000/json').then(function(data){
// return data.json(); // 将获取到的数据使用 json 转换对象
return data.text(); // // 将获取到的数据 转换成字符串
}).then(function(data){
// console.log(data.uname)
// console.log(typeof data)
var obj = JSON.parse(data);
console.log(obj.uname,obj.age,obj.gender)
})
PS：text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
axios
1.传参
如果使用params传参，服务端是通过 xx.query.xx来获得参数的，如ret.query.id，如果用params就是undefined
在POST中，现在用URLSearchParams来提交也是返回对象格式，而不是字符串
PUT要传ID进去，不然怎么知道你更新的是哪个对象
2.全局配置
在传递请求头时，要到服务端允许该请求头的跨域使用
# 配置公共的请求头
axios.defaults.baseURL = 'https://api.example.com';
# 配置 超时时间
axios.defaults.timeout = 2500;
# 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
3.拦截器
1.请求拦截器 req 请求拦截器的作用是在请求发送前进行一些操作
2.响应拦截器 res 响应拦截器的作用是在接收到响应后进行一些操作
例子：
# 1. 请求拦截器
axios.interceptors.request.use(function(config) {
console.log(config.url)
# 1.1 任何请求都会经过这一步 在发送请求之前做些什么
config.headers.mytoken = 'nihao';
# 1.2 这里一定要return 否则配置不成功
return config;
}, function(err){
#1.3 对请求错误做点什么
console.log(err)
})
#2. 响应拦截器
axios.interceptors.response.use(function(res) {
#2.1 在接收响应做些什么
var data = res.data;
return data;
}, function(err){
#2.2 对响应错误做点什么
console.log(err)
})
4.async await后面要接promise实例对象
1.async作为一个关键字放到函数前面
2.任何一个async函数都会隐式返回一个`promise`
3.await关键字只能在使用async定义的函数中使用
4.await后面可以直接跟一个 Promise实例对象
5.await函数不能单独使用