一、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 概述

MDN文档-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 概述

MDN文档-Fetch API

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) })