1、URL地址格式。
答：1）、传统形式的URL。格式schema://host:port/path?query#fragment。
a、schema，协议，例如http、https、ftp等等。
b、host，域名或者ip地址。
c、port，端口，http默认端口80，可以省略，可选。域名加端口可以确定互联网中某一点电脑中某一个应用程序。
d、path，路径，例如/abc/a/b/c，可选。
e、query，查询参数，例如uname=lisi&age=12，可选。
f、fragment，锚点（哈希hash），用于定位页面的某个位置，可选。
2）、Restful形式的URL地址，和提交方式密切相关。HTTP请求方式。
a、GET，查询操作。
b、POST，添加操作。
c、PUT，修改操作。
d、DELETE，删除操作。
2、Vue前后端交互模式，接口调用方式。
答：1）、原生Ajax、基于JQuery的Ajax（基于dom的操作）、fetch（不是基于dom的操作）、axios（比fetch更加强大）。
3、Promise用法，Promise是一个函数，函数也是一个对象。
答：1）、Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。
a、使用Promise主要有以下好处，好处一，可以避免多层异步调用嵌套问题（回调地狱）。好处二，Promise对象提供了简洁的API，使得控制异步操作更加容易。
2）、实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务。
3）、承诺和规定，resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <script type="text/javascript" src="js/jquery.js"></script> 10 <script type="text/javascript"> 11 /* Promise的基本使用 */ 12 console.log(typeof Promise) 13 console.dir(Promise); 14 15 var p = new Promise(function(resolve, reject) { 16 // 这里用于实现异步任务 17 setTimeout(function() { 18 var flag = true; 19 if (flag) { 20 // 正常情况 21 resolve('hello world!!!'); 22 } else { 23 // 异常情况 24 reject('Error......'); 25 } 26 }, 100); 27 }); 28 // 承诺和规定，resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果。 29 p.then(function(data) { 30 // 处理正确的结果 31 console.log(data) 32 }, function(info) { 33 // 处理错误的结果 34 console.log(info) 35 }); 36 </script> 37 </body> 38 </html>
4、Promise用法，基于Promise发送Ajax请求。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div>hello world!!!!</div> 9 10 <script type="text/javascript" src="js/jquery.js"></script> 11 <script type="text/javascript"> 12 /* 基于Promise发送Ajax请求*/ 13 function queryData(url) { 14 var p = new Promise(function(resolve, reject) { 15 var xhr = new XMLHttpRequest(); 16 xhr.onreadystatechange = function() { 17 if (xhr.readyState != 4) return; 18 if (xhr.readyState == 4 && xhr.status == 200) { 19 // 处理正常的情况 20 resolve(xhr.responseText); 21 } else { 22 // 处理异常情况 23 reject('服务器错误'); 24 } 25 }; 26 xhr.open('get', url); 27 xhr.send(null); 28 }); 29 return p; 30 } 31 /* queryData('http://localhost:3000/data') 32 .then(function(data) { 33 console.log(data); 34 }, function(info) { 35 console.log(info) 36 }); */ 37 // ============================ 38 // 发送多个ajax请求并且保证顺序 39 queryData('http://localhost:3000/data') 40 .then(function(data) { 41 console.log(data) 42 return queryData('http://localhost:3000/data1'); 43 }) 44 .then(function(data) { 45 console.log(data); 46 return queryData('http://localhost:3000/data2'); 47 }) 48 .then(function(data) { 49 console.log(data) 50 }); 51 </script> 52 </body> 53 </html>
5、Promise用法，then参数中的函数返回值。then是一个函数，这个函数是有返回值的。
1）、返回Promise实例对象，返回的该实例对象会调用下一个then。
2）、返回普通值，返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 /* then参数中的函数返回值*/ 11 function queryData(url) { 12 return new Promise(function(resolve, reject) { 13 var xhr = new XMLHttpRequest(); 14 xhr.onreadystatechange = function() { 15 if (xhr.readyState != 4) return; 16 if (xhr.readyState == 4 && xhr.status == 200) { 17 // 处理正常的情况 18 resolve(xhr.responseText); 19 } else { 20 // 处理异常情况 21 reject('服务器错误'); 22 } 23 }; 24 xhr.open('get', url); 25 xhr.send(null); 26 }); 27 } 28 queryData('http://localhost:3000/data') 29 .then(function(data) { 30 return queryData('http://localhost:3000/data1'); 31 }) 32 .then(function(data) { 33 return new Promise(function(resolve, reject) { 34 setTimeout(function() { 35 resolve(123); 36 }, 1000) 37 }); 38 }) 39 .then(function(data) { 40 return 'hello'; 41 }) 42 .then(function(data) { 43 console.log(data) 44 }) 45 </script> 46 </body> 47 </html>
6、Promise用法，Promise常用的API。
1）、p.then()得到异步任务的正确结果。
2）、p.catch()获取异常信息。
3）、p.finally()成功与否都会执行（尚且不是正式标准）。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 /* Promise常用API-实例方法 */ 11 // console.dir(Promise); 12 function foo() { 13 return new Promise(function(resolve, reject) { 14 setTimeout(function() { 15 resolve(123); 16 //reject('error'); 17 }, 100); 18 }) 19 } 20 // foo() 21 // .then(function(data){ 22 // console.log(data) 23 // }) 24 // .catch(function(data){ 25 // console.log(data) 26 // }) 27 // .finally(function(){ 28 // console.log('finished') 29 // }); 30 31 // -------------------------- 32 // 两种写法是等效的 33 foo().then(function(data) { 34 console.log(data) 35 }, function(data) { 36 console.log(data) 37 }) 38 .finally(function() { 39 console.log('finished') 40 }); 41 </script> 42 </body> 43 </html>
7、Promise用法，Promise 常用的API对象方法。
1）、Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果。
2）、Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 /* Promise常用API-对象方法 */ 11 // console.dir(Promise) 12 function queryData(url) { 13 return new Promise(function(resolve, reject) { 14 var xhr = new XMLHttpRequest(); 15 xhr.onreadystatechange = function() { 16 if (xhr.readyState != 4) return; 17 if (xhr.readyState == 4 && xhr.status == 200) { 18 // 处理正常的情况 19 resolve(xhr.responseText); 20 } else { 21 // 处理异常情况 22 reject('服务器错误'); 23 } 24 }; 25 xhr.open('get', url); 26 xhr.send(null); 27 }); 28 } 29 30 var p1 = queryData('http://localhost:3000/a1'); 31 var p2 = queryData('http://localhost:3000/a2'); 32 var p3 = queryData('http://localhost:3000/a3'); 33 Promise.all([p1, p2, p3]).then(function(result) { 34 console.log(result) 35 }) 36 /* Promise.race([p1, p2, p3]).then(function(result) { 37 console.log(result) 38 }) */ 39 </script> 40 </body> 41 </html>
8、接口调用fetch用法。
1）、更加简单的数据获取方式，功能更加强大，更加灵活，可以看作是xhr的升级版。
2）、基于Promise实现。
3）、语法结构。fetch(url).then(fn2).then(fn3).then(fn4)....catch(fn);
4)、实现逻辑是调用一个接口，然后通过then的方式得到数据，通过data.text()返回，返回的是一个Promise对象，将它返回，然后通过下一个then得到具体的数据。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 /* Fetch api的使用 */ 11 fetch('http://localhost:3000/fdata').then(function(data) { 12 // data不可以直接拿到数据，而是要调用fetch提供的text获取数据，text返回的是promise对象，直接将它返回，通过下一个then得到最终的数据 13 // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据 14 return data.text(); 15 }).then(function(data) { 16 console.log(data); 17 }); 18 </script> 19 </body> 20 </html>
9、接口调用fetch用法，fetch API参数传递，常用配置选项。
1）、method(String)，http请求方法，默认为Get(Get、Post、Put、Delete，对应的是增删改查)。
2）、body(String)，http的请求参数。主要要发送Post、Put通过body传递信息。
3）、headers(Object)，http的请求头，默认为{}。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 /* Fetch API 调用接口传递参数 */ 11 /* 1、Get参数传递，传统的URL形式 */ 12 fetch('http://localhost:3000/books?id=123', { 13 // 默认method是get。 14 method: 'get' 15 }).then(function(data) { 16 return data.text(); 17 }).then(function(data) { 18 console.log(data); 19 }); 20 21 /* 2、GET参数传递-restful形式的URL */ 22 fetch('http://localhost:3000/books/456', { 23 // 默认method是get。 24 method: 'get' 25 }).then(function(data) { 26 return data.text(); 27 }).then(function(data) { 28 console.log(data); 29 }); 30 31 32 /* 3、DELETE请求方式参数传递 */ 33 fetch('http://localhost:3000/books/789', { 34 // 默认method是get。 35 method: 'delete' 36 }).then(function(data) { 37 return data.text(); 38 }).then(function(data) { 39 console.log(data); 40 }); 41 42 /* 4、POST请求传参 */ 43 fetch('http://localhost:3000/books', { 44 // 默认method是get。 45 method: 'post', 46 body: 'uname=张飒飒&pwd=123456', 47 headers: { // 请求头必须设置 48 'Content-Type': 'application/x-www-form-urlencoded' 49 } 50 }).then(function(data) { 51 return data.text(); 52 }).then(function(data) { 53 console.log(data); 54 }); 55 /* 箭头函数的使用 */ 56 fetch('http://localhost:3000/books', { 57 // 默认method是get。 58 method: 'post', 59 body: 'uname=张飒飒2号&pwd=123456', 60 headers: { // 请求头必须设置 61 'Content-Type': 'application/x-www-form-urlencoded' 62 } 63 }).then(data => { 64 return data.text(); 65 }).then(ret => { 66 console.log(ret); 67 }); 68 69 /* 5、POST请求传参 */ 70 fetch('http://localhost:3000/books', { 71 // 默认method是get。 72 method: 'post', 73 body: JSON.stringify({ 74 uname: '张三3号', 75 pwd: '456789', 76 }), 77 headers: { 78 'Content-Type': 'application/json;charset=utf-8;' 79 } 80 }).then(function(data) { 81 return data.text(); 82 }).then(function(data) { 83 console.log(data); 84 }); 85 86 87 /* 6、PUT请求传参*/ 88 fetch('http://localhost:3000/books/123', { 89 method: 'put', 90 body: JSON.stringify({ 91 uname: '张三', 92 pwd: '789' 93 }), 94 headers: { 95 'Content-Type': 'application/json;charset=utf-8;' 96 } 97 }).then(function(data) { 98 return data.text(); 99 }).then(function(data) { 100 console.log(data) 101 }); 102 </script> 103 </body> 104 </html>
10、接口调用fetch用法，fetch相应结果。相应数据格式。
1）、text()，讲返回体处理成字符串类型。
2）、json()，返回结果和JSON.parse(reponseText)一样。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 /* Fetch响应结果的数据格式 */ 11 fetch('http://localhost:3000/json').then(function(data) { 12 // 如果使用json格式，返回的时候就不用进行处理了。 13 // return data.json(); 14 return data.text(); 15 }).then(function(data) { 16 // console.log(data.uname) 17 // console.log(typeof data) 18 19 var obj = JSON.parse(data); 20 console.log(obj.uname, obj.age, obj.gender) 21 }) 22 </script> 23 </body> 24 </html>
11、接口调用axios用法。axios官网，https://github.com/axios/axios，是一个基于Promise用于浏览器核node.js的http客户端。
1）、支持浏览器核node.js。支持promise。
2）、能够拦截请求核相应，自动转json数据。
3）、axios的基本用法。data属性名称是固定的，用于获取后台相应的数据。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript" src="js/axios.js"></script> 10 <script type="text/javascript"> 11 /* 接口调用axios用法 */ 12 axios.get('http://localhost:3000/adata').then(function(ret) { 13 // 注意data属性是固定的用法，用于获取后台的实际数据 14 console.log(ret.data); 15 console.log(ret); 16 }); 17 </script> 18 </body> 19 </html>
12、接口调用axios用法。axios的常用api。
1）、get查询数据。通过url传递参数，通过params选项传递参数。
2）、post添加数据，通过选项传递参数，默认传递的是json格式的数据。或者通过URLSearchParams传递参数application/x-www-form-urlencoded。
3）、put修改数据，参数传递方式与POST类似。
4）、delete删除数据。参数传递方式与GET类似。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript" src="js/axios.js"></script> 10 <script type="text/javascript"> 11 /* 1、接口调用axios用法，通过url传递参数 */ 12 axios.get('http://localhost:3000/axios?id=123').then(function(ret) { 13 // 注意data属性是固定的用法，用于获取后台的实际数据 14 console.log(ret.data); 15 //console.log(ret); 16 }); 17 18 /* 2、接口调用axios用法，通过url传递参数，restful的形式 */ 19 axios.get('http://localhost:3000/axios/456').then(function(ret) { 20 // 注意data属性是固定的用法，用于获取后台的实际数据 21 console.log(ret.data); 22 //console.log(ret); 23 }); 24 25 /* 3、接口调用axios用法，通过params选项传递参数 */ 26 axios.get('http://localhost:3000/axios', { 27 params: { 28 id: 789, 29 } 30 }).then(function(ret) { 31 // 注意data属性是固定的用法，用于获取后台的实际数据 32 console.log(ret.data); 33 //console.log(ret); 34 }); 35 36 37 /* 4、接口调用axios用法，通过url传递参数 */ 38 axios.delete('http://localhost:3000/axios?id=123456').then(function(ret) { 39 // 注意data属性是固定的用法，用于获取后台的实际数据 40 console.log(ret.data); 41 //console.log(ret); 42 }); 43 44 45 /* 5、接口调用axios用法，post添加数据，通过选项传递参数，默认传递的是json格式的数据。 */ 46 axios.post('http://localhost:3000/axios', { 47 uname: '张飒飒', 48 pwd: 123456 49 }).then(function(ret) { 50 // 注意data属性是固定的用法，用于获取后台的实际数据 51 console.log(ret.data); 52 //console.log(ret); 53 }); 54 55 /* 接口调用axios用法，表单形式的格式*/ 56 var params = new URLSearchParams(); 57 params.append('uname', 'zhangsan'); 58 params.append('pwd', '111'); 59 axios.post('http://localhost:3000/axios', params).then(function(ret) { 60 console.log(ret.data) 61 }) 62 63 64 /* 6、接口调用axios用法，put修改数据。 */ 65 axios.put('http://localhost:3000/axios/123', { 66 uname: '张飒飒2号', 67 pwd: 123456 68 }).then(function(ret) { 69 // 注意data属性是固定的用法，用于获取后台的实际数据 70 console.log(ret.data); 71 //console.log(ret); 72 }); 73 </script> 74 </body> 75 </html>
13、接口调用axios用法，axios的响应结果。相应结果的主要属性。
1）、data，实际相应回来的数据。
2）、headers，相应头信息。
3）、status，响应状态码。
4）、statusText，相应状态信息。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript" src="js/axios.js"></script> 10 <script type="text/javascript"> 11 /* 1、接口调用axios用法，axios相应结果与全局配置。 */ 12 axios.get('http://localhost:3000/axios-json').then(function(ret) { 13 console.log(ret.data.uname); 14 console.log(ret.data); 15 console.log(ret); 16 }); 17 18 19 /* axios的全局配置。 */ 20 /* 2、配置请求的基准URL地址 */ 21 axios.defaults.baseURL = 'http://localhost:3000/'; 22 axios.defaults.timeout = 1000; //超时时间，这里是1000毫秒，等于1秒。 23 // 配置请求头信息 24 axios.defaults.headers['mytoken'] = 'hello'; 25 axios.get('axios-json').then(function(ret) { 26 console.log(ret.data.uname) 27 }) 28 </script> 29 </body> 30 </html>
14、接口调用axios用法，axios拦截器。
1）、请求拦截器，在请求发出之前设置一些信息，比如设置请求头。
2）、相应拦截器，在获取数据之前对数据做一些加工处理。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript" src="js/axios.js"></script> 10 <script type="text/javascript"> 11 /* 1、接口调用axios用法，axios的请求拦截器。 */ 12 axios.interceptors.request.use(function(config) { 13 console.log(config.url); 14 config.headers.mytoken = 'nihao!'; 15 return config; 16 }, function(error) { 17 console.log(error); 18 }); 19 20 /* axios的相应拦截器 */ 21 axios.interceptors.response.use(function(res) { 22 // console.log(res) 23 var data = res.data; 24 console.log(data) 25 return data; 26 }, function(err) { 27 console.log(err) 28 }) 29 30 axios.get('http://localhost:3000/adata').then(function(data) { 31 console.log(data); 32 }); 33 </script> 34 </body> 35 </html>
15、接口调用axios用法，接口调用async和await用法。
1）、async/await是ES7引入的新语法，可以更加方便的进行异步操作。
2）、async关键字用于函数上，async函数的返回值是Promise实例对象。async的返回值还是Promise的值。
3）、await关键字用于async函数当中，await可以得到异步的结果。此时就不需要再书写.then函数或者回调函数了。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript" src="js/axios.js"></script> 10 <script type="text/javascript"> 11 /* 1、async/await处理异步操作：async函数返回一个Promise实例对象，await后面可以直接跟一个Promise实例对象 */ 12 13 /* 普通的get方式调用 */ 14 axios.defaults.baseURL = 'http://localhost:3000'; 15 axios.get('adata').then(function(ret) { 16 console.log(ret.data) 17 }) 18 19 /* 2、async/await处理异步操作 */ 20 async function queryData() { 21 // await得到异步的结果,axios.get('adata');前面加了await之后,就不需要加.then方法了. 22 var ret = await axios.get('adata'); 23 console.log(ret.data); 24 // 如果这里直接返回了,调用的时候可以通过.then进行调用. 25 return ret.data; 26 } 27 28 /* await返回一个Promise实例对象 */ 29 async function queryData() { 30 var ret = await new Promise(function(resolve, reject) { 31 setTimeout(function() { 32 resolve('nihao!') 33 }, 1000); 34 }) 35 console.log(ret.data) 36 return ret; 37 } 38 39 // 调用queryData方法. 40 queryData().then(function(data) { 41 console.log(data) 42 }) 43 </script> 44 </body> 45 </html>
16、接口调用axios用法，async和await处理多个异步请求。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 <script type="text/javascript" src="js/axios.js"></script> 10 <script type="text/javascript"> 11 axios.defaults.baseURL = 'http://localhost:3000'; 12 async function queryData() { 13 /* 使用await修饰的异步操作,获取到一个结果 */ 14 var info = await axios.get('async1'); 15 /* 第二个异步操作需要使用第一个异步操作的结果 */ 16 var ret = await axios.get('async2?info=' + info.data); 17 return ret.data; 18 } 19 20 queryData().then(function(data) { 21 console.log(data) 22 }) 23 </script> 24 </body> 25 </html>