一、URL 地址格式
1、传统形式的 URL
- 格式:schema://host:port/path?query#fragment
(1) schema:协议(http、https、ftp等)
(2) host:域名或IP地址
(3) port:端口,http 默认端口80,可以省略
(4) path:路径
(5) query:查询参数。例如 uname=lisi&age=12
(6) fragment:锚点(哈希Hash)用于定位页面的某个位置
2、Restful 形式的 URL
-
HTTP请求方式
GET 查询
POST 添加
PUT 修改
DELETE 删除
二、Promise 用法
1、异步调用
-
异步效果分析:定时任务、Ajax、事件函数
-
多次异步调用的依赖分析
(1)多次异步调用的结果顺序不确定
(2)异步调用结果如果存在依赖需要嵌套
2、Promise 概述
Promise 是异步编程的一种解决方案,从语法上讲,Promise 是一个对象,从它可以获取异步操作的消息
使用 Promise
- 可以避免多层异步调用嵌套问题(回调地狱)
- Promise 对象提供了简洁的API,使得控制异步操作更加容易
3、Promise 基本用法
- 实例化 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 flag = true; //或flag = false
if(flag){
resolve('right'); //正常
}else{
reject('error'); //异常
}
},1000);
});
p.then(function(data){
console.log(data); //从resolve得到正常结果
},function(ret){
console.log(ret); //从reject得到错误信息
})
4、基于 Promise 处理Ajax请求
4.1、处理原生Ajax
function queryData(){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4)return;
if(xhr.state == 200){
resolve(xhr.responseText)
}else{
reject('出错了');
}
}
xhr.open('get','/data');
xhr.send(null);
})
}
//发送多个ajax请求并且保证顺序
queryData('urc1').then(function(data){
console.log(data);
return queryData('urc2');
}).then(function(data){
console.log(data);
return queryData('urc3');
}).then(function(data){
console.log(data);
});
5、then 参数中的函数返回值
5.1、返回 Promise实例对象
返回的实例对象会调用下一个then
5.2、返回 普通值
返回的普通值会直接传递给下一个 then,通过then参数中函数的参数接收该值
6、Promise 常用的API
6.1、实例方法
- .then() 得到异步任务的正确结果
- .catch() 获取异常信息
- .finally() 成功与否都会执行
quetyData()
.then(function(data){
console.log(data);
})
.catch(function(data){
console.log(data);
})
.finally(function(){
console.log('finished');
});
6.2、对象方法
- Promise.all() 并发处理多个异步任务,所有任务都执行完毕才能得到结果
- Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果
var p1 = queryData('urc1');
var p2 = queryData('urc2');
var p3 = queryData('urc3');
Promise.all([p1,p2,p3]).then((result) => {
console.log(result)
})
Promise.race([p1,p2,p3]).then((result) => {
console.log(result)
})
三、接口调用 - fetch用法
1、fetch 概述
1.1、基本特性
- 更加简单的数据获取方式,功能更强大,更灵活,可以看作xhr的升级版
- 基于Promise实现
1.2、语法结构
fetch(url).then(fn2)
.then(fn3)
...
.catch(fn)
2、基本用法
fetch('urc').then(data => {
return data.text(); //text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret => {
console.log(ret); //这里得到的才是最终的数据
});
3、fetch 请求参数
3.1、常用配置选项
- method(String): HTTP请求方法,默认为GET(GET、POST、PUT、DELETE)
- body(String): HTTP的请求参数
- headers(Object): HTTP的请求头、默认为{}
fetch('urc',{
method:'get'
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret);
});
3.2、GET 请求方式的参数传递
fetch('urc?id=123',{ //传统的URL传递参数id=123
method:'get'
}).then(data => {
return data.text(); //text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret => {
console.log(ret); //这里得到的才是最终的数据
});
fetch('urc/123',{ //Restful形式的URL传递参数
method:'get'
}).then(data => {
return data.text(); //text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret => {
console.log(ret); //这里得到的才是最终的数据
});
3.3、DELETE 请求方式的参数传递
fetch('urc/123',{
method:'delete'
}).then(data => {
return data.text(); //text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret => {
console.log(ret); //这里得到的才是最终的数据
});
3.4、 POST 请求方式的参数传递
fetch('urc',{
method:'post',
body:'uname=lisi&pwd=123', //参数传递lisi 123
headers:{
'Content-Type':'application/x-www-form-urlencoded',
}
}).then(data => {
return data.text(); //text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret => {
console.log(ret); //这里得到的才是最终的数据
});
fetch('urc',{
method:'post',
body:JSON.stringify({
umane:'lisi',
age:12
})
headers:{
'Content-Type':'application/json',
}
}).then(data => {
return data.text(); //text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret => {
console.log(ret); //这里得到的才是最终的数据
});
3.5、 PUT 请求方式的参数传递
fetch('urc/123',{ //传递参数123
method:'put',
body:JSON.stringify({
umane:'lisi', //传递参数lisi
age:12 //传递参数12
})
headers:{
'Content-Type':'application/json',
}
}).then(data => {
return data.text(); //text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret => {
console.log(ret); //这里得到的才是最终的数据
});
4、fetch 响应结果
响应数据格式
- text(): 将返回体处理成字符串类型
- json(): 返回结果和 JSON.parse(respondeText) 一样
fetch('urc').then(data => {
return data.text(); //text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret => {
console.log(ret); //这里得到的才是最终的数据
});
fetch('urc').then(data => {
return data.json();
}).then(ret => {
console.log(ret); //这里得到的才是最终的数据
});
fetch('urc').then(data => {
return data.json();
}).then(ret => {
console.log(ret.key); //这里得到的才是最终的数据
});
fetch('urc').then(data => {
return data.text(); //text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
}).then(ret => {
var obj = JSON.parse(ret);
console.log(obj); //这里得到的才是最终的数据
console.log(obj.key);
});
四、接口调用 - axios用法
1、axios 的基本特性
官网
axios是一个基于Promise用于浏览器和node.js的HTTP客户端。
- 支持浏览器和 node.js
- 支持 promise
- 能拦截请求和响应
- 自动转换 JSON数据
2、axios 的基本用法
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
axios.get('src').then(ret=>{
console.log(ret.data) //data属性名称是固定的,用于获取后台响应的数据
})
</script>
3、axios 的参数传递
3.1、GET 传递参数
- 通过URL传递参数
- 通过 params 选项传递参数
axios.get('/abc?id=123').then(ret=>{
console.log(ret.data)
})
axios.get('/abc/123').then(ret=>{
console.log(ret.data)
})
axios.get('/abc',{
params:{
id:123
}
}).then(ret=>{
console.log(ret.data)
})
3.2、DELETE 传递参数
axios.delete('/abc?id=123').then(ret=>{
console.log(ret.data)
})
axios.delete('/abc/123').then(ret=>{
console.log(ret.data)
})
axios.delete('/abc',{
params:{
id:123
}
}).then(ret=>{
console.log(ret.data)
})
3.3、POST 传递参数
- 通过选项传递参数(默认传递的 json格式的数据)
axios.post('/abc',{
uname:'lisi',
pwd:123
}).then(ret=>{
console.log(ret.data)
})
- 通过 URLSearchParams 传递参数(application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('src',params).then(ret=>{
console.log(ret.data)
})
3.4、PUT 传递参数
axios.put('/abc',{
uname:'lisi',
pwd:123
}).then(ret=>{
console.log(ret.data)
})
4、axios 的响应结果
响应结果的主要属性
- data: 实际响应回来的数据
- headers: 响应头信息
- status: 响应状态码
- statusText: 响应状态信息
5、axios 的全局配置
- axios.defaults.timeout = 3000; //超时时间
- axios.defaults.baseURL = ‘src’ //默认地址
- axios.defaults.headers[‘mytoken’] = ‘str’ //设置请求头
axios.get('http://abc/axios-json').then(function(ret){
console.log(ret.data.uname)
})
axios.default.baseURL = 'http://abc/'; //配置基准URL地址
axios.get('axios-json').then(function(ret){
console.log(ret.data.uname)
})
6、axios 拦截器
6.1、请求拦截器
在请求发出之前设置一些信息
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些信息设置
return config;
},function(error){
//处理响应的错误信息
});
6.2、响应拦截器
在获取响应数据前对响应数据做一些加工处理
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
//在这里对返回的数据做一些处理
return res;
},function(error){
//处理响应的错误信息
})
五、接口调用 - async/await 用法
1、async/await 的基本用法
- async/await 是ES7引入的新语法,可以更加方便的进行异步操作
- async 关键字用于函数上(async函数的返回值是Promise实例对象)
- await 关键字用于async函数当中(await可以得到异步的结果)
async function queryData(id){
const ret = await axios.get('src');
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
2、async/await 处理多个异步请求
async function queryData(id){
const info = await axios.get{'/async1'};
const ret = await axios.get('async2?info='+info.data);
return ret;
}
queryData.then(ret=>{
console.log(ret)
})