目录 Promise的基本使用 基本使用 多个请求，链式编程 Promise的API实例方法 Promise的API对象方法（直接通过Promise函数名称调用的方法） 接口调用-fetch用法 基本使用 常用配置选项 fetch响应
目录
- Promise的基本使用
- 基本使用
- 多个请求，链式编程
- Promise的API—实例方法
- Promise的API—对象方法（直接通过Promise函数名称调用的方法）
- 接口调用-fetch用法
- 基本使用
- 常用配置选项
- fetch响应结果
- 接口调用–axios用法
- 认识
- axios的基础用法
- axios的响应结果
- axios拦截器
- async 和 await
- async 基础用法
- async 函数处理多个异步函数
Promise的基本使用
基本使用
new一个promise，为其传入一个函数作为参数，这个函数中传入两个参数，分别用来执行异步任务成功和失败的回调函数。
function query(){
var p=new Promise(function(resolve,reject){
setTimeout(function(){
var flag=true;
if(flag){
resolve('对了');
}
else{
reject('错了');
}
},1000)
});
return p;
}
query().then(function(data){ //第一个函数接收成功的值
console.log(data);
},function(data){ //第二个函数接收失败的值
console.log(data);
});
输出结果：‘对了'
多个请求，链式编程
当我们发送多个请求时，传统的ajax会出现多层嵌套的回调地狱，Promise为我们提供了链式编程。
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;
}
// 发送多个ajax请求并且保证执行顺序
queryData('http://localhost:3000/data')
.then(function(data){
console.log(data)
//想要链式编程下去，必须return
return queryData('http://localhost:3000/data1');
})
.then(function(data){
console.log(data);
return queryData('http://localhost:3000/data2');
})
.then(function(data){
console.log(data)
});
Promise的API—实例方法
.then()： 传入两个参数时，只执行成功的。传入一个参数时，那个参数执行的是成功的回调。- 得到成功的结果
.catch()：传入两个参数时，只执行错误的。传入一个参数时，那个参数执行的是失败的回调。- 得到异常的结果
.finally()不是正式标准- 无论成功与否都会执行
<script type="text/javascript">
/*
Promise常用API-实例方法
*/
// console.dir(Promise);
function foo() {
return new Promise(function(resolve, reject){
setTimeout(function(){
// resolve(123);
reject('error');
}, 100);
})
}
foo()
.then(function(data){
console.log(data)
})
.catch(function(data){
console.log(data)
})
.finally(function(){
console.log('finished')
});
// --------------------------
// 两种写法是等效的
foo()
.then(function(data){
# 得到异步任务正确的结果
console.log(data)
},function(data){
# 获取异常信息
console.log(data)
})
# 成功与否都会执行（不是正式标准）
.finally(function(){
console.log('finished')
});
</script>
Promise的API—对象方法（直接通过Promise函数名称调用的方法）
（1）Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果。
Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定
（2）Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果。
Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
<script type="text/javascript">
/*
Promise常用API-对象方法
*/
// console.dir(Promise)
function queryData(url) {
return 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);
});
}
var p1 = queryData('http://localhost:3000/a1');
var p2 = queryData('http://localhost:3000/a2');
var p3 = queryData('http://localhost:3000/a3');
Promise.all([p1,p2,p3]).then(function(result){
//请求时间和发送顺序有关，先发送先返回。
// all 中的参数 [p1,p2,p3] 和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
})
Promise.race([p1,p2,p3]).then(function(result){
// 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
console.log(result) // "HELLO TOM"
})
</script>
接口调用-fetch用法
基本使用
- 更加简单的数据获取方式，高性能更强大、更灵活，可以看做是xhr的升级版
- 给Promise实现
- Fetch API是新的ajax解决方案 Fetch会返回Promise
- fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch(url, options).then(）
<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(); //text()是fetch的一个api，返回的是一个Promise的对象
}).then(function(data){
// 在这个then里面我们能拿到最终的数据
console.log(data);
})
</script>
常用配置选项
- fetch(url, options).then(）
- HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
- 默认的是 GET 请求
- 需要在 options 对象中 指定对应的 method method:请求使用的方法
- post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body
GET请求
传统url请求传参—通过“？”传递参数
前端代码
fetch('http://localhost:3000/books?id=123', {
# get 请求可以省略不写 默认的是GET
method: 'get'
})
.then(function(data) {
# 它返回一个Promise实例对象，用于获取后台返回的数据
return data.text();
}).then(function(data) {
# 在这个then里面我们能拿到最终的数据
console.log(data)
});
后端代码
app.get('/books'(req.res)=>{
res.send("传统url传递参数"+req.query.id);
})
restful形式url传递参数—通过“/”传递参数
前端代码
fetch('http://localhost:3000/books/456', {
# get 请求可以省略不写 默认的是GET
method: 'get'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
后端代码
app.get('/book/:id',(req.res)=>{
res.send("restful形式传递参数"+req.params.id);
})
DELETE请求
与GET方式相似，只需把method属性改为“delete”
POST请求方式的参数传递
post传递参数时，option对象中除了method属性，需要额外增加headers和body属性
前端代码
body为查询字符串格式
var url='http://127.0.0.1:3000/product/books/';
fetch(url,{
method:'post',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
body:'uname=高进宇&pwd=11223344'
}).then(data=>{
return data.text();
}).then(data=>{
console.log(data);
})
后端代码
app.post('/books', (req, res) => {
res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
body为JSON格式
fetch('http://localhost:3000/books', {
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)
});
后端代码
app.post('/books', (req, res) => {
res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
PUT请求方式的参数传递
fetch响应结果
用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等
text():将返回体处理成字符串形式json()：返回结果和JSON.parse(response.Text)一样
/*
Fetch响应结果的数据格式
*/
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)
})
接口调用–axios用法
认识
- 基于promise用于浏览器和node.js的http客户端
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
- 能转换请求和响应数据
axios的基础用法
axios的常用API
get()post()delete()put()
axios 全局配置
配置公共的请求头
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';
GET请求
发送get请求
axios.get('http://localhost:3000/adata').then(function(ret){
# 拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面
// 注意data属性是固定的用法，用于获取后台的实际数据
console.log(ret.data)
console.log(ret)
})
get 请求传递参数
通过传统的url 以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
console.log(ret.data)
})
restful 形式传递参数
axios.get('http://localhost:3000/axios/123').then(function(ret){
console.log(ret.data)
})
通过params 形式传递参数
前端代码
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret){
console.log(ret.data)
})
后端代码
router.get('/axios', (req, res) => {
res.send('axios get 传递参数' + req.query.id)
})
DELETE请求传参
传参形式和GET请求一样
POST请求
通过选项传递参数(默认传递的是json格式的数据）
前端代码
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
后端代码
router.post('/axios', (req, res) => {
res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
通过 URLSearchParams传递参数（application/x-www-form-urlencoded）
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
console.log(ret.data)
})
PUT请求
与post请求一样。
axios的响应结果
data:实际响应回来的数据。headers：响应头信息。status：响应状态码。statusText：响应状态信息。
axios拦截器
请求拦截器
请求拦截器的作用是在请求发送前进行一些操作
例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
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)
})
响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作
例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
axios.interceptors.response.use(function(res) {
#2.1 在接收响应做些什么
var data = res.data;
return data;
}, function(err){
#2.2 对响应错误做点什么
console.log(err)
})
经过以上响应拦截器处理以后。下面拿到的res就是需要的数据，不需要再进行res.data的操作。
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
}).then(function(res){
console.log(res)
})
async 和 await
async作为一个关键字放到函数前面
任何一个async函数都会隐式返回一个promise
await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
async/await 让异步代码看起来、表现起来更像同步代码
async/await是ES7引入的新语法，可以更加方便的进行异步操作。
async关键字用于函数上（async函数的返回值是Promise对象）。
await关键字用于async函数当中（await可以直接得到异步的结果）。
async 基础用法
//async作为一个关键字放到函数前面
async function queryData() {
//await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象
var ret = await new Promise(function(resolve, reject){
setTimeout(function(){
resolve('nihao')
},1000);
})
// console.log(ret.data)
return ret;
}
//任何一个async函数都会隐式返回一个promise 我们可以使用then 进行链式编程
queryData().then(function(data){
console.log(data)
})
async 函数处理多个异步函数
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData() {
// 添加await之后 当前的await 返回结果之后才会执行后面的代码
var info = await axios.get('async1');
// 让异步代码看起来、表现起来更像同步代码
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function(data){
console.log(data)
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。