Promise 用法

小灰灰 2023-10-06 16:15 5阅读 0赞

#### 阅读目录 ####

*  promise是什么？
 *   *  为什么会有promise？
     *  promise 是一个对象
     *  promise详解
     *  promise有三个状态：
     *  Promise 解决回调地狱
 *  Promise 用法
 *   *  Promise 概述
     *  Promise 基本用法
     *  Promise基于原生ajax发送请求，php并设置跨域
     *  基于 Promise 处理Ajax请求
     *  Promise 常用 API
     *   *  1、实例方法
         *  3、 对象方法
     *  fetch 概述
     *   *  1、基本特性
         *  2、语法结构
         *  3、fetch 请求参数
         *   *  1、常用配置选项
             *  2、GET请求方式的参数传递
             *  Fetch 的 get 传参
             *  Fetch 的 delete 传参
     *  axios 的基本特性
     *   *  Get基本应用
         *  axios 的常用API
         *   *  1、get 传递参数
             *  2、delete传递参数
         *  Post 请求
         *  axios 响应结果
         *   *  ajax中 Uncaught ReferenceError: axios is not defined
         *  async/await 的基本用法
         *   *  Async/await 处理多个异步请求
 *  待解决问题

## promise是什么？ ##

1、主要用于异步计算

2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

3、可以在对象之间传递和操作promise，帮助我们处理队列

### 为什么会有promise？ ###

为了避免界面冻结（任务）

同步：  
假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。

那桌客人明明已经吃上了，你只是想要个菜单，这么小的动作，服务员却要你等到别人的一个大动作完成之后，才能再来招呼你，这个便是同步的问题：也就是“顺序交付的工作1234，必须按照1234的顺序完成”。

异步：  
则是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作。  
等到系统完成了前面的工作之后，再通过回调或者事件，继续做A剩下的工作。  
AB工作的完成顺序，和交付他们的时间顺序无关，所以叫“异步”。

有了nodeJS之后…  
对异步的依赖进一步加剧了

大家都知道在nodeJS出来之前PHP、Java、python等后台语言已经很成熟了，nodejs要想能够有自己的一片天，那就得拿出点自己的绝活：

无阻塞高并发，是nodeJS的招牌，要达到无阻塞高并发异步是其基本保障

举例：  
查询数据从数据库，PHP第一个任务查询数据，后面有了新任务，那么后面任务会被挂起排队；

而nodeJS是第一个任务挂起交给数据库去跑，然后去接待第二个任务交给对应的系统组件去处理挂起，接着去接待第三个任务…那这样子的处理必然要依赖于异步操作。

### promise 是一个对象 ###

promise 是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）

并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据

代码风格，容易理解，便于维护

多个异步等待合并便于解决

### promise详解 ###

new Promise(
      function (resolve, reject) {
        
        // 一段耗时的异步操作
        resolve('成功') // 数据处理完成
        // reject('失败') // 数据处理出错
      }
    ).then(
      (res) => {
        console.log(res)},  // 成功
      (err) => {
        console.log(err)} // 失败
    )

resolve 作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

### promise有三个状态： ###

1、pending \[待定\] 初始状态

2、fulfilled \[实现\] 操作成功

3、rejected \[被否决\] 操作失败

当promise状态发生改变，就会触发 `then()` 里的响应函数处理后续步骤；

promise状态一经改变，不会再变。

Promise对象的状态改变，只有两种可能：

从 `pending` 变为 `fulfilled`

从 `pending` 变为 `rejected`。

这两种情况只要发生，状态就凝固了，不会再变了。

### Promise 解决回调地狱 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## Promise 用法 ##

### Promise 概述 ###

Promise 是异步编程的一种解决方案，从语法上讲，Promise 是一个对象，从它可以获取异步操作的消息。

ES6 Promise

ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。

`console.dir(Promise)`

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
 使用 Promise 主要有以下好处：

可以避免多层异步调用嵌套问题（回调地狱）

Promise 对象提供了简洁API，使得控制异步操作更加容易

### Promise 基本用法 ###

实例化 Promise 对象，构造函数中传递函数，该函数中用于处理异步任务

`resolve` 和 `reject` 两个参数用于处理成功和失败两种情况，并通过 `p.then` 获取处理结果

var p = new Promise(function(resolve,reject){
        
    	// 成功时调用 resolve()
    	// 失败时调用 reject()
    });
    
    p.then(function(ret){
        
    	// 从 resolve 得到正常结果
    },function(ret){
        
    	// 从 reject 得到错误信息
    });

示例

一秒后打印：  
![在这里插入图片描述][acdceff99eae4e1db93ba6d3906394a6.png]

### Promise基于原生ajax发送请求，php并设置跨域 ###

php

laravel

public function getIndex()
    {
        
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
    
        //主要为跨域CORS配置的两大基本信息,Origin和headers
        $arr=[
            'name'=>'willem',
            'age'=>'30',
            'sex'=>'男'
        ];
    
        return response()->json($arr);
    }

预览  
![在这里插入图片描述][a9948774d9994b2e878a2b0d291f948d.png]

### 基于 Promise 处理Ajax请求 ###

queryData()
    	.then(function(data){
        
    		return queryData();
    	})
    	.then(function(data){
        
    		return queryData();
    	})
    	.then(function(data){
        
    		return queryData();
    	});

发送多次 ajax 请求

then 参数中的函数返回值

1、返回 Promise 实例对象  
返回的该实例对象会调用下一个then

2、返回普通值  
返回的普通值会直接传递给下一个 then，通过 then 参数中函数的参数接收该值

![在这里插入图片描述][4b5898dfeac14a6ea01b8f1888138e2e.png]

### Promise 常用 API ###

#### 1、实例方法 ####

`p.then()`得到异步任务的正确结果  
`p.catch` 获取异常信息  
`p.finally()`成功与否都会执行（尚且不是正式标准）

queryData()
    	.then(function(data){
        
    		console.log(data);
    	})
    	.catch (function(data){
        
    		console.log(data);
    	})
    	.finally(function(data){
        
    		console.log(data);
    	});

![在这里插入图片描述][252048e12bb84d95b10eecb80bb1a8af.png]

#### 3、 对象方法 ####

`Promise.all()` 并发处理多个异步任务，所有任务都执行完成才能得到结果  
`Promise.race()` 并发处理多个异步任务，只要有一个任务完成就能得到结果

Promise.all([p1,p2,p3]).then((result)=>{
        
    	console.log(result)
    })
    
    Promise.race([p1,p2,p3]).then((result)=>{
        
    	console.log(result)
    })

![在这里插入图片描述][42944ce6877c4ce59d3879c42e7e39a7.png]

<?php
    
    namespace App\Http\Controllers;
    
    use App\User;
    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\App;
    
    class TestController extends Controller
    {
        
        public function __construct()
        {
        
            header('Access-Control-Allow-Origin: *');
            header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
        }
        public function getIndex()
        {
        
            //主要为跨域CORS配置的两大基本信息,Origin和headers
            $arr=[
                'name'=>'willem',
                'age'=>'30',
                'sex'=>'男'
            ];
    
            return response()->json($arr);
        }
        public function res()
        {
        
            $users = User::all()->toArray();
            return response()->json($users);
        }
    }

### fetch 概述 ###

#### 1、基本特性 ####

更加简单的数据获取方式，功能更强大、更灵活，可以看做是 xhr 的升级版  
基于Promise

#### 2、语法结构 ####

fetch(url).then(fn2)
    		  .then(fn3)
    		  ...
    		  .catch(fn)

![在这里插入图片描述][9f3695f90a604758af26240fcdfc22f4.png]

#### 3、fetch 请求参数 ####

##### 1、常用配置选项 #####

`method(String)`：HTTP 请求方法，默认为GET（GET、POST、PUT、DELETE）  
`body(String)`：HTTP的请求参数  
`headers(Object)`：HTTP的请求头，默认为 `{}`

响应数据格式  
`text()`：将返回体处理成字符串类型  
`json()`：返回结果和JSON.parse(reponseText)一样

fetch('/abc',{
        
    	method:'get'
    }).then(data=>{
        
    	return data.text();
    }).then(ret=>{
        
    	// 注意这里得到的才是最终的数据
    	console.log(ret);
    });

##### 2、GET请求方式的参数传递 #####

fetch('/abc?id=1').then(data=>{
        
    	return data.text();
    }).then(ret=>{
        
    	// 注意这里得到的才是最终的数据
    	console.log(ret);
    });
    
    fetch('/abc/2').then(data=>{
        
    	method:'get'
    }).then(ret=>{
        
    	return data.text();
    }).then(ret=>{
        
    	// 注意这里得到的才是最终的数据
    	console.log(ret);
    });

##### Fetch 的 get 传参 #####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
laravel

<?php
    
    namespace App\Http\Controllers;
    
    class TestController extends Controller
    {
        
        public function __construct()
        {
        
            header('Access-Control-Allow-Origin: *');
            header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
        }
        
        public function res()
        {
         
            $request = request()->all();
            return response()->json($request);
        }
    }

##### Fetch 的 delete 传参 #####

fetch('/abc/123',{
        'method':'get'})
    .then(function(data){
        
        return data.text(); //text返回的是Promise对象
    }).then(function(data){
        
        console.log(data);  //注意这里得到的才是最终的数据
    });

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
laravel 采用api路由

<?php
    
    namespace App\Http\Controllers;
    
    use App\User;
    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\App;
    use Illuminate\Support\Facades\URL;
    
    class TestController extends Controller
    {
        
        public function __construct()
        {
        
            header('Access-Control-Allow-Origin: *');
            header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
        }
    
        public function res()
        {
         
            $request = request()->all();
    
            return response()->json($request);
        }
        
    }

Fetch.php设置请求头后php才鞥获取到delete请求方式

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
    //主要为跨域CORS配置的两大基本信息,Origin和headers
    header('Access-Control-Allow-Methods: POST, GET, DELETE,PUT,OPTIONS');//fetch设置header头才能获取PUT请求
    header('Access-Control-Allow-Headers: X-Requested-with');
    header('Access-Control-Allow-Headers: Content-Type');
    
    //获取完整url地址
    $url = $_SERVER["REQUEST_SCHEME"].'://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
    $params=substr($url,strripos($url,'php')+4);
    $exp=explode('/',$params);
    //var_export($exp);exit;
    
    for($i=0;$i<=count($exp)-1;$i++){
        
        if($i%2==0){
        
            $ba[$exp[$i]]=$exp[$i+1];
        }
    }
    
    $arr=[
        'name'=>'willem',
        'age'=>'30',
        'sex'=>'男',
        'id'=>$ba['id']
    ];
    
    var_dump($_SERVER['REQUEST_METHOD']);//获取提交方式
        
    echo json_encode($arr,JSON_UNESCAPED_UNICODE);

### axios 的基本特性 ###

axios（官网：https://github.com/axios/axios）是一个基于Promise用于浏览器和node.js的HTTP客户端。

它具有以下特征：

*  支持浏览器的node.js
 *  支持promise
 *  能拦截请求和响应
 *  自动转换json数据

axios.get('/adata')
    	 .then(ret=>{
        
    		// data属性名称是固定的，用于获取后台响应的数据
    		console.log(ret.data)
    	 })

#### Get基本应用 ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]

#### axios 的常用API ####

*  get：查询数据
 *  post：添加数据
 *  put：修改数据
 *  delete：删除数据

##### 1、get 传递参数 #####

*  通过URL传递参数
 *  通过 params 选项传递参数

axios.get('/adata?id=123')
         .then(res=>{
        
    		console.log(ret.data)
    	 })
    
    axios.get('/adata/123')
         .then(res=>{
        
    		console.log(ret.data)
    	 })
    
    axios.get('/adata',{
        
    		params:{
        
    			id:123
    		}
    	 })
         .then(res=>{
        
    		console.log(ret.data)
    	 })

##### 2、delete传递参数 #####

参数传递与get类似

axios.delete('/adata?id=123')
         .then(res=>{
        
    		console.log(ret.data)
    	 })
    
    axios.delete('/adata/123')
         .then(res=>{
        
    		console.log(ret.data)
    	 })
    
    axios.delete('/adata',{
        
    		params:{
        
    			id:123
    		}
    	 })
         .then(res=>{
        
    		console.log(ret.data)
    	 })

用 delete 此问题暂未解决  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]

#### Post 请求 ####

post传递参数

*  通过选项传递参数（默认传递的是json格式的数据）
 *  通过 URLSearchParams 传递参数（application/x-www-form-urlencoded）

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]

#### axios 响应结果 ####

响应结果的主要属性

*  data：实际响应回来的数据
 *  headers：响应头信息
 *  status：响应状态码
 *  statusText：响应状态信息

axios 的全局配置

*  axios.defaults.timeout = 3000; // 超时时间
 *  axios.defaults.baseURL = “http://localhost:3000/app”; // 默认地址
 *  axios.defaults.headers\[‘mytoken’\] = ‘asdfjasldfadsk’; // 设置请求头

##### ajax中 Uncaught ReferenceError: axios is not defined #####

问题  
![在这里插入图片描述][15fdce7ced9940a1927f13568ed0499d.png]  
原因

使用 `axios` 请求方式发送数据时，没有引入

解决方法

在请求端口代码中 引入axios.js库

#### async/await 的基本用法 ####

*  async/await 是ES7引入的新语法，可以更加方便的进行异步操作
 *  async 关键字用于函数上（async函数的返回值是Promise实例对象）
 *  await 关键字用于async函数当中（await可以得到异步的结果）

##### Async/await 处理多个异步请求 #####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]

## 待解决问题 ##

设置默认headers请求头后报一下错误  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/dbf30e0d9aa94669b20216681a17c10c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/7c18c77be3aa4614938b71472a6c7785.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[acdceff99eae4e1db93ba6d3906394a6.png]: https://img-blog.csdnimg.cn/acdceff99eae4e1db93ba6d3906394a6.png
[a9948774d9994b2e878a2b0d291f948d.png]: https://img-blog.csdnimg.cn/a9948774d9994b2e878a2b0d291f948d.png
[4b5898dfeac14a6ea01b8f1888138e2e.png]: https://img-blog.csdnimg.cn/4b5898dfeac14a6ea01b8f1888138e2e.png
[252048e12bb84d95b10eecb80bb1a8af.png]: https://img-blog.csdnimg.cn/252048e12bb84d95b10eecb80bb1a8af.png
[42944ce6877c4ce59d3879c42e7e39a7.png]: https://img-blog.csdnimg.cn/42944ce6877c4ce59d3879c42e7e39a7.png
[9f3695f90a604758af26240fcdfc22f4.png]: https://img-blog.csdnimg.cn/9f3695f90a604758af26240fcdfc22f4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/135c78fd07b647b3b3a9dae20dc7c77c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/f5a69015b9154ec590cfd8c68c71eb7d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/85aaa8d07b554e019753477a0f917cdb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/0048e4f9ea8e47f09c2314768278dd2b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/d3d4f756051942348cb393e655f72058.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[15fdce7ced9940a1927f13568ed0499d.png]: https://img-blog.csdnimg.cn/15fdce7ced9940a1927f13568ed0499d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/89c4c2cdf16642bbac86e059ace58941.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/046e212be1cd49ecb083507cc9b11606.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16