【面试Vue全家桶】vue前端交互模式-es7的语法结构?async/await
作者 | Jeskson
掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb
2020.1.12
前端发请求,调用后端接口,来获取特定格式的数据,老板问了,你会前后端交互模式吗?vue的那种。异步接口调用,常常使用到的语法,promise的概念是什么呢?调用接口的方式,第一种为,fetch进行接口调用,第二种为,axios进行接口的调用。
es7的语法结构?async/await方式调用接口,基于不同接口的调用方式来实现案例。
让我们了解一下前后端的交互模式,学习一下promise的语法,来回答面试官的问题,基于promise来实现异步调用,就算你会promise?那你了解fetch用法和async/await用法吗?处理异步调用接口的方式。
网上一图,回调地狱:看到晕,使代码难以理解和维护。
前后端的交互是什么
前后端的交互就是前端的浏览器去调用后端的接口,拿到后端的数据,在做前端的处理,进行渲染。客户端与服务器的通信模式,前后端交互,调用接口的方法,第一种,原生的ajax,第二种,基于jquery的ajax,第三种,基于fetch,第四种,基于axios。
前端是通过请求地址向后端发送请求的,标准的url格式是什么样的呢?
格式如下:
schema://host:port/path?query#fragment
第一个schema为协议,比如http,https,ftp等,第二个,host为域名或者ip地址,第三个port为端口,http默认为80端口,是可以省略的,第四个path为路径,比如/index,第五个query为查询参数,比如name=dada&age=12,第六个fragment为锚点,哈希Hash,是用于定位页面的某个位置。
符合规则的url有哪些是正确的呢?
http://www.dada.cn
http://www.dada.cn/index/dada
http://www.dada.cn/index/dada?name=dada
http://www.dada.cn/index/dada?name=dada#theme
新型的url地址,restful形式的。HTTP的请求方式,第一种,使用GET为查询,第二种,使用POST为添加,第三种,使用PUT为修改,第四种,使用DELETE为删除。
符合规则的url地址:
http://www.dada.com/index GET
http://www.dada.com/index POST
http://www.dada.com/index/1 PUT
http://www.dada.com/index/2 DELETE
promise对象
promise用于表示一个异步操作的最终完成(或失败),以及结果值。
Promise对象有以下两个特点
对象的状态不受外界影响
一旦状态改变,就不会再变,任何时候都可以得到这个结果
const promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo');
}, 300);
});
promise1.then(function(value) {
console.log(value);
// expected output: "foo"
});
console.log(promise1);
// expected output: [object Promise]
语法:
new Promise( function(resolve, reject) {...} /* executor */ );
因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回promise 对象, 所以它们可以被链式调用。
promise用法
promise是什么呢?它是用于异步计算,将异步操作队列化,按照期望的顺序执行,返回符合预期的结果,可以在对象之间传递和操作promise。
创建promise
const da = new Promise((resolve, reject) => {
// resolve(someValue); // fulfilled
// reject("failure reason"); // rejected
});
function da(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
};
简单的实例
new Promise(resolve => {
setTimeout(() => {
resolve('hello')
}, 2000)
}).then(res => {
console.log(res)
})
异步操作,事件监听
document.getElementById('#start').addEventListener('click',start,false);
function start() {
// 响应事件,进行相应的操作
}
//jquery on 监听
$("#start").on("click", start)
回调
$.ajax(url, {
success(res) {
}
})
// 在页面加载完毕后回调
$(function() {
// 页面结构加载完成
})
在JavaScript中,异步情况,第一种为定时任务,第二种为ajax,第三种事件函数。
new Promise(
function (resolve, reject) {
resolve('成功') // 数据处理完成
// reject('失败') // 数据处理出错
}
).then(
(res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失败
)
异步编程与promise
$.ajax({
url: '',
success: function(data) {
console.log(data)
}
});
index.js
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
// 处理静态资源
app.use(express.static('public'))
// 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}));
// 设置允许跨域访问服务
app.all("*", function(req,res,next){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "PUT,GET,POST,DELETE,OPTIONS");
res.header("Access-Control-Allow-Headers","X-Requested-With");
res.header("Access-Control-Allow-Headers","Content-Type");
next();
});
// 路由
app.get('/data', (req,res) => {
res.send("hello world!")
})
// 启动监听
app.listen(3000, () => {
console.log("runing...")
})
异步编程,多次异步调用,结果顺序结果不确定
promise是异步编程的一种解决方案,从语法上来讲,promise是一个对象,从它可以获取异步操作的消息。使用promise的好处有哪些呢?
它可以避免多层异步调用嵌套问题(回调地狱),promis对象提供了简洁的api,使得控制异步操作更加容易。回调地狱,多层嵌套请求问题,请求接口调用后台数据,有两种可能性,一种为成功回调,一种为失败回调,成功后写一下成功后的操作代码,失败后也要写一下失败后的操作代码。
在JavaScript中的世界里,所有的代码都是单线程执行的。因为这个缺点,所以会导致在JavaScript中的所有网络操作,浏览器事件,都必须是异步执行的,异步执行可以用回到函数实现。
function callback() {
console.log("dada");
}
console.log("dada setTimeout()");
setTimeout(callback, 1000);
// 1秒后调用callback函数
注意,异步操作会在将来某个时间点触发一个函数调用。
ajax的经典异步操作
request.onreadystatechange = function() {
if(request.readyState === 4) {
if(request.status === 200) {
return success(request.responseText);
}else{
return fail(request.status);
}
}
}
'use strict';
new Promise(function() {} );
// 直接运行测试:
console.log('支持Promise!');
如果同时发送多个ajax的请求,返回来的结果是不确定的,要想返回的结果顺序确定下来,就必须进行嵌套,如果嵌套就会有回调地狱的问题,这样导致的代码可读性就会降低,所以就有promise语法来解决这一回调地狱的问题。
所以promise的出现的好处就是为了解决地狱回调,可以避免嵌套问题,和简洁的代码结构,可读性增强。
console.log(typeof Promise)
示例
let da = new Promise(function(resolve, reject){
// 当异步代码执行成功时,会调用 resolve(...)
// 当异步代码失败时, 会调用 reject(...)
//使用setTimeout(...)来模拟异步代码
setTimeout(function(){
resolve("成功!");
}, 250);
});
da.then(function(res){
//res的值是上面调用resolve(...)方法传入的值.
console.log("dada" + res);
});
promise的基本用法
首先实例化promise对象,构造函数中传递函数,该函数中用于处理异步任务,有两个参数,resolve和reject用于处理成功和失败的两种情况,并通过p.then获取处理结果。
then()方法返回一个promise:
const da = new Promise(function(resolve, reject) {
resolve('da!');
});
da.then(function(value) {
console.log(value);
// expected output: "da!"
});
语法
p.then(onFulfilled[, onRejected]);
p.then(value => {
// fulfillment
}, reason => {
// rejection
});
var dada = new Promise((resolve, reject) => {
resolve('成功!');
// or
// reject(new Error("出错了!"));
});
dada.then(value => {
console.log(value); // 成功!
}, reason => {
console.error(reason); // 出错了!
});
catch()方法返回一个promise,并且处理拒绝的情况
p.catch(onRejected);
p.catch(function(reason) {
// 拒绝
});
finally()方法返回一个promise,在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。
p.finally(onFinally);
p.finally(function() {
// 返回状态为(resolved 或 rejected)
});
new Promise(resolve => {
setTimeout(() => {
resolve('hello')
}, 2000)
}).then(val => {
console.log(val) // 参数val = 'hello'
return new Promise(resolve => {
setTimeout(() => {
resolve('world')
}, 2000)
})
}).then(val => {
console.log(val) // 参数val = 'world'
})
代码例子:
var p = new Promise(function(resolve, reject) {
// 成功回调 resolve()
// 失败回调 reject()
});
p.then(function(ret) {
// resolve得到正常的结果
},function(ret) {
// reject得到错误的结果
});
resolve作用为将promise对象的状态从“未完成”变成为“成功”,即是从Pending变为resolved,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去,而reject的作用是将promise对象的状态从“未完成”变成“失败”,就是从Pending变成rejected,在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
promise有三种状态,第一种为Pending,待定,初始状态,第二种状态为fulfilled,实现,操作成功,第三种状态为rejected,被否决,操作失败。
当promise状态发生改变时,就会触发then()里面的响应函数处理,promise状态一旦改变,就不会再变了。所以promis对象的状态改变有两种情况,第一种,从pending变为fulfilled,第二种为,从pending变为rejected。
基于promise处理ajax请求,处理原生ajax
function queryData(url) {
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState != 4) return;
if(xhr.status == 200) {
resolve(xhr.responseText)
}else {
reject('出错了');
}
}
xhr.open('get',url);
xhr.send(null);
})
}
发送多个ajax请求
queryData()
.then(function(data){
return queryData();
})
.then(function(data){
return queryData();
})
.then(function(data){
return queryData();
});
// return 是新的promise对象
then参数中的函数返回值
第一种,返回promsie实例对象,返回的实例对象会调用下一个then
第二种,返回普通值,返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值
promise常用的api
实例方法有三种,第一种,p.then()得到异步任务的正确结果,第二种,p.catch()获取异常信息,第三种,p.finally()成功与否都会执行。
queryData()
.then(function(data){
console.log(data);
})
.catch(function(data){
console.log(data);
})
.finally(function(){
console.log('finished');
});
promise常用api-实例方法
function da() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
// resolve(123);
reject('error');
},100);
})
}
da()
.then(function(data){
console.log(data)
})
.catch(function(data){
console.log(data)
})
.finally(function(){
console.log('dada')
});
da()
.then(function(data){
console.log(data)
},function(data){
console.log(data)
})
.finally(function(){
console.log('dada')
});
对象方法
promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果
promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果
Promise.all([p1,p2,p3]).then(result) => {
console.log(result);
})
Promise.race([p1,p2,p3]).then(result) => {
console.log(result);
})
代码:
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(url);
var p2 = queryDate(url1);
Promise.all([p1,p2]).then(function(result){
console.log(result)
})
在promise中常用到回调函数延时绑定,返回值,错误冒泡。
const promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)
})
promise.then(() => {
console.log(3)
})
console.log(4)
VM49:2 1
VM49:4 2
VM49:9 4
VM49:7 3
undefined
其中,promise构造函数是执行同步的作用,promise.then是执行异步函数的操作。
let pro = new Promise(resolve => {
setTimeout(() => {
resolve('hello world')
}, 2000)
})
setTimeout(() => {
pro.then(value => {
console.log(value)
// hello world
})
}, 2000)
接口调用fetch的用法
fetch的概述,它更加简单的数据获取方式,功能更加强大,更加灵活,基于promise实现的。
语法结构:
fetch(url).then()
.then()
...
.catch()
fetch的基本用法
fetch('/da').then(data=>{
return data.text();
}).then(ret={
console.log(ret);
});
text()方法属于fetchapi中的一部分,它返回一个promise实例对象,用于获取后台返回的数据。
fetch请求参数
method(string)
http请求方法,默认为GET,可以使用POST,PUT,DELETE
body(string)
http的请求参数
headers(object)
http的请求头
fetch('/da', {
method; 'get'
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
GET请求方式的参数传递
fetch('/da?id=123').then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
fetch('/da/123', {
method: 'get'
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
delete请求方式的参数传递
fetch('/da/123', {
method: 'delete'
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
fetch请求参数的post请求方式的参数传递
fetch('/da', {
method: 'post',
body: 'name=dada',
headers: {
'content-Type': 'application/x-www-form-urlencoded',
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
post请求方式的参数传递
fetch('/da', {
method: 'post',
body: JSON.stringify({
name: 'dada',
age: 12
})
headers;{
'Conent-Type': 'application/json',
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
fetch响应结果
响应数据格式
text()
将返回体处理成字符串类型
json()
返回结果和json.parse(presponseText)相同
接口调用axios用法
第三方的库,很强大,是一个局域promise用于浏览器和node.js的HTTP客户端。
它的特性,第一点是支持浏览器和node.js,第二点是支持promise,第三点,能够拦截请求和响应,第四点,可以自动转换json类型。
axios的基本用法
axios.get('/dada')
.then(ret=>{
console.log(ret.data);
});
axios的常用api
get,查询数据,post,添加数据,put,修改数据,delete,删除数据。
get传递参数,第一,通过url传递参数,第二种,通过params传递参数
axios.get('/da?id=123')
.then(ret=>{
console.log(ret.data);
})
restful传参
axios.get('/dada/123')
.then(ret=>{
console.log(ret.data)
})
axios.get('/da', {
params: {
id: 123
}
})
.then(ret=>{
console.log(ret.data)
})
delete传递参数
参数传递方式与get类似
axios.delete('/da?id=1)
.then(ret=>{
console.log(ret.data)
})
axios.delete('/da/2)
.then(ret=>{
console.log(ret.data)
})
axios.delete('/da', {
params: {
id:1
}
})
.then(ret=>{
console.log(ret.data);
})
post传递参数
axios.post('/da', {
name; 'dada',
}).then(res=>{
console.log(res.data)
})
默认传递的是json格式的数据。
post传递参数,通过URLSearchParams传递参数
application/x-www-form-urlencoded
const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/api/da', params).then(res => {
console.log(res.data)
})
put传递参数
参数传递方式与post类似
axios.put('/da/1', {
name: 'dada',
}).then(res=>{
console.log(res.data)
})
axios的响应结果
data为响应回来的数据,headers为响应头信息,status为响应状态码,statusText响应状态信息。
axios.post('/da-json').then(res=>{
console.log(res)
})
axios的全局 配置
axios.default.timeout = 3000; // 超时时间
axios.default.baseURL = 'http...' // 默认地址
axios.default.headers['mytoken'] = 'xxxx' //设置请求头
// 配置请求的基准url地址
axios.default.baseURL = 'http://localhost:xxx/';
axios.get('da-json').then(function(res){
console.log(res.data.name);
});
axios拦截器
axios.interceptors.request.use(function(config){
//在拿过去发出之前进行一些信息设置
return config;
},function(err) {
// 处理响应的错误信息
});
在获取数据之前对数据做一些加工处理。
接口调用async/await用法
async/await是es7引入的语法,更加方便了异步操作。
async function queryData(id) {
const res = await axios.get('/data');
return res;
}
queryData.then(res=>{
console.log(res)
})
async关键字用于函数上,await关键字用于async函数中。
async function name([param[, param[, ... param]]]) { statements }
name:
函数名称
param:
要传递给函数的参数的名称
statements:
函数体语句
返回值:
返回的Promise对象会以async function的返回值进行解析
或者以该函数抛出的异常进行回绝。
多个异步请求的async/await处理
async function queryData(id) {
const da1 = await axios.get('/da1');
const da2 = await axios.get('/da2?name=dada');
return res;
}
queryData.then(res=>{
console.log(res)
})
出现了async/await之前,我们有三种异步书写我们的代码,第一,嵌套回调,第二,以promise为主的链式回调,使用generators。
async function dada(x) {
let a = 1;
return x+a;
}
undefined
dada(10);
Promise {<resolved>: 11}__proto__:
Promisecatch: ƒ catch()constructor:
ƒ Promise()finally: ƒ finally()then:
ƒ then()Symbol(Symbol.toStringTag):
"Promise"__proto__: Object[[PromiseStatus]]:
"resolved"[[PromiseValue]]:
11
await只能在async函数内部使用,用在普通函数里就会报错。async/await实际上是Generator的语法糖。async关键字代表后面的函数中有异步操作,await表示等待一个异步方法执行完成。async 函数返回一个Promise对象,因此 async 函数通过 return 返回的值,会成为 then 方法中回调函数的参数。
await 就是异步等待,它等待的是一个Promise,async函数调用不会造成代码的阻塞,但是await会引起async函数内部代码的阻塞。
带async关键字的函数,是声明异步函数,返回值是promise对象
async function test() {
return 'da'
}
test();
返回值为 Promise {<resolved>: "da"}。
宏任务和微任务都是队列
宏任务有script、setTimeout、setInterval等
微任务有Promise.then,catch,finally,process.nextTick等
参考地址
https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544
最后
欢迎加我微信(xiaoda0423),拉你进技术群,长期交流学习...
欢迎关注「达达前端」,认真学前端,做个有专业的技术人...
在博客平台里,未来的路还很长,也希望自己以后的文章大家能多多支持,多多批评指正,我们一起进步,一起走花路。
非常感谢读者能看到这里,如果这个文章写得还不错,觉得「达达」我有点东西的话,觉得我能够坚持的学习,觉得此人可以交朋友的话, 求点赞,求关注,求分享,对暖男我来说真的
非常有用!!!
推荐阅读:
2019年的每一天日更只为等待她的出现,好好过余生,庆余年 | 掘金年度征文
一篇文章带你了解JavaScript中的变量,作用域和内存问题
一篇文章带你了解JavaScript中的语法,数据类型,流程控制语句以及函数
感谢阅读,原创不易,喜欢就点个[在看] or [转发朋友圈],这是我写作最大的动力。
意见反馈
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。
这是一个有质量,有态度的公众号
点关注,有好运