有关异步的知识

拼搏现实的明天。 2023-01-07 02:30 169阅读 0赞

### 文章目录 ###

*  1.异步操作
 *   *  1.1 什么是单线程？
     *  1.2 为什么JavaScript是单线程？
     *  1.3 异步出现的原因？
 *  2.Event Loop(事件轮询)
 *   *  2.1 Event Loop 的理解
     *  2.2 Event Loop 运行流程
 *  3. XHR(XMLHttpRequest)
 *   *  3.1 AJAX
 *  4 fetch
 *   *  4.1 fetch优势
     *  4.2 fetch存在问题
 *  5. settimeout和setinterval
 *  6. promise
 *   *  6.1 Promise 对象
     *   *  6.2 Promise 状态
         *  6.3 then 方法
         *  6.4 Promise.all
         *  6.5 Promise.race
 *  7. axios
 *   *  7.1 axios基本使用
     *  7.2 axios全局配置
     *  7.3 常见的配置选项
     *  7.4 同时发送两个请求
     *  7.5 axios实例
     *  7.6 axios封装
     *  7.7 axios拦截器

# 1.异步操作 #

## 1.1 什么是单线程？ ##

JavaScript是单线程语言。只有一个线程，同时只能做一件事，两段js不能同时执行。

## 1.2 为什么JavaScript是单线程？ ##

为了避免DOM渲染冲突；

## 1.3 异步出现的原因？ ##

解决因同步执行代码阻塞时间过长而导致的页面卡死情况

# 2.Event Loop(事件轮询) #

## 2.1 Event Loop 的理解 ##

*  `Event Loop`是javascript的执行机制，用于`等待`和`发送消息`的事件，是`实现异步`的具体解决方案
 *  在程序中设置两个线程：一个负责程序本身的运行，称为"`主线程`"；另一个负责主线程与其他进程（主要是各种I/O操作）的通信，被称为"EventLoop线程"（可以译为"`异步线程`"）。

## 2.2 Event Loop 运行流程 ##

ES6标准中，任务又分为两种类型，`宏任务`（macrotask）和`微任务`（microtask）。

宏任务：由宿主环境提供，比如：`setTimeout`、`setInterval`、`网络请求`、用户I/O、`script（整体代码）`、UI rendering、setImmediate（node）。

微任务：语言标准（ECMAScript）提供，如：`process.nextTick`(node环境中，要先于其他微任务执行)、`Promise`、Object.observe、MutationObserver。

1.  同步代码（主线程）直接执行；
2.  异步函数先放在异步队列中，在异步队列中区分宏任务`macrotask` 和微任务 `microtask`，（根据任务分类，又将任务队列分为`宏观任务队列（microtask queue）`和`微观任务队列（microtask queue）`。任务队列的读取顺序是先读取所有微观任务队列执行后再读取一个宏观任务队列，再读取所有微观任务队列，再读取一个宏观任务队列…）
3.  待同步函数执行完毕，轮询执行 异步队列中的函数；
4.  以上步骤不断重复执行，就形成了事件轮询event-loop；

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

# 3. XHR(XMLHttpRequest) #

*  `XMLHttpRequest`对象用于与服务器交互。
 *  通过 `XMLHttpRequest` 可以在不刷新页面的情况下请求特定 URL，获取数据。
 *  这允许网页在不影响用户操作的情况下，更新页面的局部内容。
 *  `XMLHttpRequest` 在 `AJAX` 编程中被大量使用。

this.xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
        this.xhr.open('post', url, true); // post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        this.xhr.onload = evt => this.uploadComplete(evt); // 请求完成
        this.xhr.onloadstart = () => this.progressFunction(uuid); // 请求开始
        this.xhr.upload.onprogress = () => this.progressFunction(uuid); // 请求中
        this.xhr.onerror = this.uploadFailed; // 请求失败
        this.xhr.send(formData); // 开始上传，发送form数据

## 3.1 AJAX ##

Asynchronous JavaScript + XML（异步JavaScript和XML）。  
网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。

$.ajax({ 
        type : "GET",  //提交方式
        url : web2,//路径,www根目录下
    	datatype: "json",//数据类型
    	async: false, //是否为异步操作
        success : function(result) { //返回数据根据结果进行相应的处理
    	var accountname = result.attributes.accountname;
        alert(accountname);
          }
    });

# 4 fetch #

`fetch`是一种HTTP数据请求的方式，是`XMLHttpRequest`的一种替代方案。`fetch`不是ajax`的`进一步封装，而是原生js。fetch函数就是原生js，没有使用`XMLHttpRequest`对象。

## 4.1 fetch优势 ##

1.  语法简洁，更加语义化
2.  基于标准 `Promise` 实现，支持 `async/await`
3.  同构方便，使用 isomorphic-fetch
4.  更加底层，提供的API丰富（request, response）
5.  脱离了`XHR`，是ES规范里新的实现方式

## 4.2 fetch存在问题 ##

1.  fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。
2.  fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
3.  fetch默认不会带cookie，需要添加配置项： fetch(url, \{credentials: ‘include’\})
4.  fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
5.  fetch没有办法原生监测请求的进度，而XHR可以

# 5. settimeout和setinterval #

`settimeout`和`setinterval`也是异步操作，该操作里面的内容会延迟操作。

# 6. promise #

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

## 6.1 Promise 对象 ##

*  用同步的方式来书写异步代码
 *  Promise 让异步操作写起来，像在写同步操作的流程，解决了回调地狱的问题(不必一层层地嵌套回调函数)
 *  改善了可读性，对于多层嵌套的回调函数很方便
 *  充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口

function fn() { 
      return new Promise((resolve, reject) => { 
        resolve(result) //成功时调用 resolve
        reject(error)   //失败时调用 reject
      })
    }
    
    fn().then(success, fail).then(success2, fail2).catch(fail3);

### 6.2 Promise 状态 ###

Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

### 6.3 then 方法 ###

then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

在 JavaScript 事件队列的当前运行完成之前，回调函数永远不会被调用。

可以添加多个回调函数，它们会按照插入顺序并且独立运行。

### 6.4 Promise.all ###

*  `Promise.all` 需要传入一个数组，数组中的元素都是 `Promise` 对象。
 *  当这些对象都执行成功时，则 all 对应的 promise 也成功，且执行 then 中的成功回调。
 *  如果有一个失败了，则 all 对应的 promise 失败，且失败时只能获得第一个失败 Promise 的数据。

const p1 = new Promise((resolve, reject) => { 
      resolve('成功了')
    })
    const p2 = Promise.resolve('success')
    const p3 = Promise.reject('失败')
    
    Promise.all([p1, p2]).then((result) => { 
      console.log(result)  //["成功了", "success"]
    }).catch((error) => { 
      //未被调用
    })
    
    Promise.all([p1, p3, p2]).then((result) => { 
      //未被调用
    }).catch((error) => { 
      console.log(error)  //"失败"
    });

### 6.5 Promise.race ###

`Promise.race()` 里面哪个 `Promise` 对象最快得到结果，就返回那个结果，不管结果本身是成功状态还是失败状态。

# 7. axios #

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。本质也是对XHR的封装

使用Axios的好处：

1.  在浏览器中发送XMLHttpRequests请求
2.  在node.js中发送http请求
3.  支持Promise API
4.  拦截请求和响应
5.  转换请求和相应数据

## 7.1 axios基本使用 ##

# 1. 发送get 请求 
    	axios.get('http://localhost:3000/adata').then(function(ret){  
          #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
          // 注意data属性是固定的用法，用于获取后台的实际数据
          // console.log(ret.data)
          console.log(ret)
        })
    	# 2.  get 请求传递参数
        # 2.1  通过传统的url  以 ? 的形式传递参数
    	axios.get('http://localhost:3000/axios?id=123').then(function(ret){ 
          console.log(ret.data)
        })
        # 2.2  restful 形式传递参数 
        axios.get('http://localhost:3000/axios/123').then(function(ret){ 
          console.log(ret.data)
        })
    	# 2.3  通过params  形式传递参数 
        axios.get('http://localhost:3000/axios', { 
          params: { 
            id: 789
          }
        }).then(function(ret){ 
          console.log(ret.data)
        })
    	#3 axios delete 请求传参     传参的形式和 get 请求一样
        axios.delete('http://localhost:3000/axios', { 
          params: { 
            id: 111
          }
        }).then(function(ret){ 
          console.log(ret.data)
        })
    
    	# 4  axios 的 post 请求
        # 4.1  通过选项传递参数
        axios.post('http://localhost:3000/axios', { 
          uname: 'lisi',
          pwd: 123
        }).then(function(ret){ 
          console.log(ret.data)
        })
    	# 4.2  通过 URLSearchParams  传递参数 
        var params = new URLSearchParams();
        params.append('uname', 'zhangsan');
        params.append('pwd', '111');
        axios.post('http://localhost:3000/axios', params).then(function(ret){ 
          console.log(ret.data)
        })
    
     	#5  axios put 请求传参   和 post 请求一样 
        axios.put('http://localhost:3000/axios/123', { 
          uname: 'lisi',
          pwd: 123
        }).then(function(ret){ 
          console.log(ret.data)
        })

## 7.2 axios全局配置 ##

开发中,很多参数是固定的. 可以进行一些抽取, 也可以利用axiox的全局配置

axios.defaults.baseURL = 'tp://000.000'
    axios.defaults.headers.post['Content-Type'] = 'xxxxx'
    
    export default { 
        name: 'app',
        created () { 
            // 提取全局的配置
            axios.defaults.baseURL = 'http://000.000'
            
            // 发送并发请求 
            axios.all([
                axios.get('/xxxx'), 
                axios.get('/xxxxx', { 
                    params: { 
                        type: 'sell', 
                        page: 1
                    }}
                )
            ]).then(axios.spread((rea1, res2) => { 
                console.log(res1);
                console.log(res2);
            }))    
        }
    }

## 7.3 常见的配置选项 ##

请求地址   url: ‘/user’,
    请求类型   method: ‘get’,
    请根路径   baseURL: ‘http://www.mt.com/api’,
    请求前的数据处理   transformRequest:[function(data){ }],
    请求后的数据处理   transformResponse: [function(data){ }],
    自定义的请求头   headers:{ ‘x-Requested-With’:‘XMLHttpRequest’},
    URL查询对象   params:{  id: 12 },
    查询对象序列化函数 
    paramsSerializer: function(params){  }
    request body
    data: {  key: ‘aa’},
    超时设置s   timeout: 1000,
    跨域是否带Token   withCredentials: false,
    自定义请求处理   adapter: function(resolve, reject, config){ },
    身份验证信息   auth: {  uname: ‘’, pwd: ‘12’},
    响应的数据格式 json / blob /document /arraybuffer / text / stream
    responseType: ‘json’,

## 7.4 同时发送两个请求 ##

使用axios.all, 可以放入多个请求的数组. axios.all(\[\]) 返回的结果是一个数组，使用 axios.spread 可将数组 \[res1,res2\] 展开为 res1, res2

import axios from 'axios'
    
    export default { 
        name: 'app',
        created () { 
            // 发送并发请求 
            axios.all([axios.get('tp://000.000/xxxx'), 
                axios.get('tp://000.000/xxxx', { params: { type: 'sell', page: 1}})])
            .then(axios.spread((rea1, res2) => { 
                console.log(res1);
                console.log(res2);
            }))    
        }
    }

## 7.5 axios实例 ##

某些请求需要使用特定的baseURL或者timeout或者content-Type等.

const inatancel = axios.create({ 
        baseURL: 'http: //111.2222',
        timeout: 5000
    })
    
    instancel({ 
        url: '/home/mutidata'
    }).then(res => { 
        console.log(res);
    })
    
    instancel({ 
        url: '/home/index'
    }).then(res => { 
        console.log(res);
    })

## 7.6 axios封装 ##

建立一个network文件夹, 在里面建立一个request.js文件

export function request (config) { 
        // 1. 创建axios的实例 
        const instance = axios.create({ 
            baseURL: 'http://111.222.33.44',
            timeout: 5000
        })
        
        // 2. 发送真正的网络请求
        // 返回的 instancel(config)就是一个promise
        return instancel(config)
    }

在使用的文件中. 封装request模块

import { request} from './network/request';
    
    request({ 
        url: '/home/multidata'
    }).then(res => { 
        console.log(res);
    }).catch(err => { 
        console.log(err);
    })

## 7.7 axios拦截器 ##

axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理

// axios.config.ts
    export function request (config) { 
        // 1. 创建axios的实例 
        const instance = axios.create({ 
            baseURL: 'http://111.222.33.44',
            timeout: 5000
        })
        
        // 2. axios拦截器 
        // config可以随便命名
        instance.interceptors.request.use(config => { 
            // 不返回, 调用的时候会进入err
            return config
        }, err => {       // 发送都没成功
            console.log(err);
        })
        
        // 3. 发送真正的网络请求
        return instancel(config)
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZtazEwMjM_size_16_color_FFFFFF_t_70]: /images/20221119/22351abd051646e89bb7e9541aa9709c.png