文章目录
- 一、前后端交互模式:
- 1. 接口调用方式:
- 2. url地址格式:
- 2.1 传统形式的url:
- 2.2 restful形式的url:
- 二、异步:
- 二、promise用法:
- 1. 什么是promise:
- 3. 基于Promise发送Ajax请求:
- 4. promise基本API:
- 三、fetch Api:
- 1. fetch概述:
- 2. fetch基本用法:
- 3. fetch请求参数:
- 3.1 参数形式
- 3.2 传统方式:GET传参
- 3.3 restful形式: GET传参
- 3.4 delete:
- 3.5 POST请求传参
- 3.5 put请求传参:
- 4. fetchAPI 中 响应格式
- 四、axios API:
- 1. 什么是axios:
- 2. axios基础用法:
- 2.1 axios的get请求:
- 2.2 axios的delete请求:
- 2.3 axios的post请求:
- 2.4 axios的put请求:
- 3. axios的响应结果:
- 4. axios全局配置:
- 5. axios 拦截器:
- 五、async 和 await:
- 1. async / await:
- 2. async基础用法:
- 3. async函数处理多个异步函数:
一、前后端交互模式:
1. 接口调用方式:
- 原生ajax
- 基于jQuery的ajax
- fetch Api;
- axios 库;
2. url地址格式:
2.1 传统形式的url:
schema://host:port/path?query#fragment
2.2 restful形式的url:
二、异步:
- JavaScript的执行环境是「单线程」;
- 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程;
- 异步模式可以一起执行多个任务;
- JS中常见的异步调用:
二、promise用法:
1. 什么是promise:
- promise是异步编程的一种解决方案, 从语法上讲, promise是一个对象, 从它可以获取异步操作的消息;
- 使用promise主要有以下好处:
- 可以避免多层异步嵌套问题(回调地狱);
- promise对象提供了简洁的API, 是的控制异步操作更加容易;
2. promise基本用法:
- 实例化Promise对象, 构造函数中传递函数, 该函数用于处理异步任务;
- resolve和reject两个参数用于处理成功赫尔失败两种情况, 并通过p.then获取处理结果;
<script type="text/javascript">
var p = new Promise(function(resolve, reject){
setTimeout(function(){
var flag = false;
if(flag) {
resolve('hello');
}else{
reject('出错了');
}
}, 100);
});
p.then(function(data){
console.log(data)
},function(info){
console.log(info)
});
script>
3. 基于Promise发送Ajax请求:
<script type="text/javascript">
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)
return queryData('http://localhost:3000/data1');
})
.then(function(data){
console.log(data);
return queryData('http://localhost:3000/data2');
})
.then(function(data){
console.log(data)
});
script>
4. promise基本API:
4.1 实例方法:
方法 |
说明 |
.then() |
得到异步任务正确的结果 |
.catch() |
获取异常信息 |
.finally() |
成功与否都会执行(不是正式标准) |
<script type="text/javascript">
function foo() {
return new Promise(function(resolve, reject){
setTimeout(function(){
reject('error');
}, 100);
})
}
foo()
.then(function(data){
console.log(data)
},function(data){
console.log(data)
})
.finally(function(){
console.log('finished')
});
script>
4.1 对象方法:
方法 |
说明 |
.all() |
Promise.all方法接受一个数组作参数,数组中的对象(p1、p2、p3)均为promise实例(如果不是一个promise,该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定 |
.race() |
Promise.race方法同样接受一个数组作参数. 当p1, p2, p3中有一个实例的状态发生改变(变为fulfilled或rejected), p的状态就跟着改变。并把第一个改变状态的promise的返回值,传给p的回调函数 |
<script type="text/javascript">
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){
console.log(result)
})
Promise.race([p1,p2,p3]).then(function(result){
console.log(result)
})
script>
三、fetch Api:
1. fetch概述:
1.1 基本特性:
- 更加简单的数据获取方式, 功能更强大, 更灵活, 可以看做xhr的升级版;
- 基于promise;
1.2 语法结构:
fetch(url).them(fn2)
.then(fn3)
...
catch(fn)
2. fetch基本用法:
<script type="text/javascript">
fetch('http://localhost:3000/fdata').then(function(data){
return data.text();
}).then(function(data){
console.log(data);
})
script>
3. fetch请求参数:
3.1 参数形式
- method(string): http请求方法(POST,GET,DELETE,UPDATE,PATCH和PUT), 默认是GET;
- body(string): http的请求参数;
- headers(obj): http请求头, 默认为{}
3.2 传统方式:GET传参
fetch('http://localhost:3000/books?id=123', {
method: 'get'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
3.3 restful形式: GET传参
fetch('http://localhost:3000/books/456', {
method: 'get'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
3.4 delete:
fetch('http://localhost:3000/books/789', {
method: 'delete'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
3.5 POST请求传参
fetch('http://localhost:3000/books', {
method: 'post',
body: 'uname=lisi&pwd=123',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
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)
});
3.5 put请求传参:
fetch('http://localhost:3000/books/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)
});
4. fetchAPI 中 响应格式
- 用fetch来获取数据,如果响应正常返回,首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要通过调用方法将其转换为相应格式的数据,比如JSON,BLOB或者TEXT等等;
fetch('http://localhost:3000/json').then(function(data){
return data.json();
}).then(function(data){
console.log(obj.uname,obj.age,obj.gender)
})
四、axios API:
1. 什么是axios:
- 基于promise用于浏览器和node.js的http客户端;
- 支持浏览器和node.js;
- 支持promise;
- 能拦截请求和响应;
- 自动转换json数据;
- 能转换请求和响应数据;
2. axios基础用法:
axios.get('/adata')
.then(ret => {
console.log(ret.data);
})
2.1 axios的get请求:
axios.get('/adata?id=123')
.then(ret => {
console.log(rest.data)
})
axios.get('/adata/123')
.then(ret => {
console.log(ret.data)
})
axios.get('/adata', {
params: {
id: 123
}
}).then(ret => {
console.log(ret.data)
})
2.2 axios的delete请求:
axios.delete('/adata?id=123')
.then(ret => {
console.log(rest.data)
})
axios.delete('/adata/123')
.then(ret => {
console.log(ret.data)
})
axios.delete('/adata', {
params: {
id: 123
}
}).then(ret => {
console.log(ret.data)
})
2.3 axios的post请求:
axios.post('/adata', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
- 通过 URLSearchParams 传递参数(表单提交):
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('/adata', params)
.then(function(ret){
console.log(ret.data)
})
2.4 axios的put请求:
axios.put('/adata', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
- 通过 URLSearchParams 传递参数(表单提交):
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.put('/adata', params)
.then(function(ret){
console.log(ret.data)
})
3. axios的响应结果:
3.1 响应结果的主要属性:
- data: 实际响应的数据;
- headers: 响应头信息;
- status: 响应状态码;
- statusText: 响应状态信息;
4. axios全局配置:
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 2500;
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
5. axios 拦截器:
5.1 请求拦截器:
- 请求拦截器的作用是在请求发送前进行一些操作
- 例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易
axios.interceptors.request.use(function(config) {
console.log(config.url)
config.headers.mytoken = 'nihao';
return config;
}, function(err){
console.log(err)
})
5.2 响应拦截器:
- 响应拦截器的作用是在接收到响应后进行一些操作
- 例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页
axios.interceptors.response.use(function(res) {
var data = res.data;
return data;
}, function(err){
console.log(err);
})
五、async 和 await:
1. async / await:
- async / awai是ES7引入的新语法, 可以实现更加方便的异步操作;
- async作为一个关键字放到函数前面:
- 任何一个async函数都会隐式返回一个promise;
- await关键字只能在使用async定义的函数中使用:
- await后面可以直接跟一个 Promise实例对象;
- await函数不能单独使用;
2. async基础用法:
async function queryData() {
var ret = await new Promise(function(resolve, reject){
setTimeout(function(){
resolve('nihao')
},1000);
})
return ret;
}
queryData().then(function(data){
console.log(data)
})
3. async函数处理多个异步函数:
axios.defaults.baseURL = 'http://localhost:5000';
async function queryData() {
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)
})