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>