第五节: 前后端交互之Promise用法和Fetch用法

一. Promise相关

1.说明

　　主要解决异步深层嵌套的问题，promise 提供了简洁的API 使得异步操作更加容易。

2.入门使用

　　我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

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

补充：回调地狱问题解决？

第五节: 前后端交互之Promise用法和Fetch用法 3. 基本Api

　　then-catch-finally，其中then-catch等价于 then(fun1,fun2)，fun2相当于catch。

代码：

 1      function foo() {
 2          return new Promise(function(resolve, reject) {
 3               setTimeout(function() {
 4                        // resolve(123);
 5                        reject('error');
 6                }, 100);
 7         })
 8      }
 9                         // foo()
10                         //   .then(function(data){
11                         //     console.log(data)
12                         //   })
13                         //   .catch(function(data){
14                         //     console.log(data)
15                         //   })
16                         //   .finally(function(){
17                         //     console.log('finished')
18                         //   });
19 
20                         // --------------------------
21                         // 两种写法是等效的
22                         foo()
23                             .then(function(data) {
24                                 console.log(data)
25                             }, function(data) {
26                                 console.log(data)
27                             })
28                             .finally(function() {
29                                 console.log('finished')
30                             });

4.对象方法

(1). all：方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用 Promise.resolve 转换为一个promise)。它的状态由这三个promise实例决定。

(2). race：Promise.race 方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为 fulfilled或 rejected ），p的状态就跟着改变。并把第一个改变状态的promise的返回值传给p的回调函数。

代码分享：

第五节: 前后端交互之Promise用法和Fetch用法

二. Fetch用法

补充：

参考 API文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

其它参考：https://www.cnblogs.com/wonyun/p/fetch_polyfill_timeout_jsonp_cookie_progress.html

用到的服务端接口方法：

 1     [Route("api/[controller]/[action]")]
 2     [ApiController]
 3     public class FirstController : ControllerBase
 4     {
 5 
 6         /******************************************下面是测试Get请求的相关方法***************************************************/
 7 
 8         #region 下面是测试Get请求的相关方法
 9         [HttpGet]
10         public string GetInfor1(string userName, string pwd)
11         {
12             return $"{userName}+{pwd}";
13         }
14 
15         [HttpGet]
16         public string GetInfor2([FromQuery]UserInfor model)
17         {
18             return $"{model.userName}+{model.pwd}";
19         }
20         [HttpGet]
21         //加上[FromQuery]也报错
22         public string GetInfor3([FromQuery]dynamic model)
23         {
24             return $"{model.userName}+{model.pwd}";
25         }
26 
27         #endregion
28 
29     }
30     [Route("api/[controller]/[action]")]
31     [ApiController]
32     public class ThirdController : Controller
33     {
34        [HttpGet]
35         public IActionResult GetInfor4(string userName, string pwd)
36         {
37             return Json(new
38             {
39                 userName,
40                 pwd
41             });
42         }
43     }

View Code