前言：最近新开了个RN的项目，网络请求用的是fetch，和以前的项目完全不一样，以前都是用的 redux + redux-promise + redux-saga 这一套来处理异步请求的。而在新项目中我们这边使用ES6的 async/await 来处理异步问题。

今天介绍一下我学习 async/await 的过程：

首先，说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数（async本身就是异步的意思）， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

其次，await必须在有关键字async的函数中使用

最后，async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法，代码如下：

async function timeout() {
    return 'hello world'
timeout().then(result => {
    console.log(result);
console.log('虽然在后面，但是我先执行');
上面代码得到的效果：
 
注意：Promise 有一个resolved，这是async 函数内部的实现原理。如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回，但如果timeout 函数内部抛出错误呢？ 那么就会调用Promise.reject() 返回一个promise 对象。
 
示例代码：
 
async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
console.log(timeout(true))  // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。
还有就是，如果async函数内部抛出错误， promise 对象有一个catch 方法进行捕获，如：
 
timeout(false).catch(err => {
    console.log(err)
总结：async/await是解决异步的一个方式，其实现原理来自于Promise，所以，Promise才是重点！
 
而await的作用就是在async（异步）函数中等待一个promise的返回，==>> 个人理解，在async中实现同步，但await执行的却是异步！
 
伪代码：==>> 便于理解
 
第一种情况：单个Promise
 
async loadData(){
    //调用接口，获取数据（接口是网上找的，不一定有用）
    fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象
      .then((res)=>{
         //接口调用正常，将调用Promise.resolve()
         return res.text() // res.text()是一个Promise对象 
      .then((res)=>{
         //接口调用正常，将调用Promise.reject()
         console.log(res) // res是最终的结果
第二种情况：多个Promise ==>> 容易造成 “回调地狱”
 
“回调地狱”：由于回调函数或者网络请求是异步的，在上面的代码中每一层的回调函数都需要依赖上一层的回调执行完，所以形成了层层嵌套的关系最终形成类似上面的回调地狱，但代码以此种形式展现时无疑是不利于我们阅读与维护的。
 
async loadData(){
    //调用接口，获取数据（接口是网上找的，不一定有用）
    fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象
      .then((res)=>{
         //接口调用正常，将调用Promise.resolve()
         return res.text() // res.text()是一个Promise对象 
         fetch(url)        //网络请求2或回调2 ==>> 第二个Promise
        .then((res)=>{
            ....           //网络请求n或回调n ==>> 第n个Promise
        .catch((err)=>{})
      .catch((err)=>{
         //接口调用正常，将调用Promise.reject()
         console.log(err) // res是最终的结果
总结：在上面这种情况中，在一个Promise中还有多个其他的Promise，里面的Promise就必须依赖于上一次的回调执行完成才可以继续执行（需要注意的是：Promise本身是异步的哦）。这样的写法代码会很多，并且不好维护，而且容易造成回调地狱。这种时候await就比较好用了。
 
使用await：
 
async loadData(){
    //调用接口，获取数据（接口是网上找的，不一定有用）
    let data1 = await ...;        //调用接口1
    let data2 = await ...;        //调用接口2
    let data3 = await ...;        //调用接口3
    console.log(data1,data2,data3);
在上面这种情况中：loadData()函数是异步的，并且每一个接口的调用都是异步的，但是每一次调用接口的时候都使用了await，使用它会等待第一个接口调用完成之后，在调用第二个接口，之后在调用第三个接口，相当于在loadData()这个异步函数里面的各个请求接口获取数据直接 是同步的，但每一个请求接口的内部确实异步的。这样就没有使用.then(()=>{}).catch(()=>{})这样的写法了，await是比较好维护并且好理解的。
 
最后，看一下 async/await 在react-native中的使用：
 
方式一：async定义函数，在其余地方调用
 
方式二：直接对 componentWillMount 等生命周期方法使用async
 
参考博客：https://www.cnblogs.com/SamWeb/p/8417940.html
 
                  https://blog.csdn.net/juhaotian/article/details/78934097
 
                  https://www.cnblogs.com/yz1311/p/6098392.html
 
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出
 
对博客文章的参考，若原文章博主介意，请联系删除！请原谅
 
                    前言：最近新开了个RN的项目，网络请求用的是fetch，和以前的项目完全不一样，以前都是用的 redux + redux-promise + redux-saga 这一套来处理异步请求的。而在新项目中我们这边使用ES6的 async/await 来处理异步问题。今天介绍一下我学习 async/await 的过程：首先，说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个...
				
转载请注明原文地址：  
  ReactNative的fetch是天然的异步请求，因此，如果你在一个代码块中使用了fetch，那么在执行的时候程序不会等待网络响应结束才执行下一条代码，而是会直接按顺序执行完整个代码块。而这样的话，某些具有先后条件的代码就会存在结果混乱等问题。
比如：一个登录方法
doLogin(){
       //1:根据输入的工号、密码...
在前期博文中，针对异步编程，提出了Promise解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息，解决回调函数嵌套过多的情况。
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。
async 是“异步”的简写，比如Ajax中就有这个代表异步请求； 因为await只能出现在async函数中的语法规定，await 可以认为是 async
				
JSX语法
RN使用JSX语法来构建页面。JSX并不是一门新的开发语言，而是Facebook技术团队提出的一种语法方案，即一种可以在JS代码中使用HTML标签来编写JS对象的语法糖，所以JSX本质上还是JS。
在React和RN应用开发中，不一定非要使用JSX，也可以使用JS进行开发。不过，因为JSX在定义上类似HTML这种树型结构，所以使用JSX可以极大地提高阅读和开发效率，减少代码维护的成本。
在React开发中，React的核心机制之一就是可以在内存中创建虚拟DOM元素，进而减少对实际DOM的操作从而
				
Async/Await 属于es7中体验异步的终极解决方案，通俗来讲就是异步函数
一般在可以和try{}catch{}一起使用
例如在react native中构建安卓日历组件DatePickerAndroid时（官网代码为：）
async 函数名 （参数）{
try {
  const {action, year, month, day} = await DatePickerAnd...
				
asyncasync字面理解是异步，如果要真正理解async，需要明白promise的概念。promise类似一个承诺，比如小王对老王承诺周三之前把需求搞定，有了这个承诺，这个承诺有两种可能，所以老王就制订了两个方案： 1. 小王没搞定，即reject，那么老王就再给一天时间。
 2. 小王搞定了，即resolve，那么交给测试进行测试。
 3. 以防万一，老王多留了个心眼，那就是这个老板临时决定暂
				
数据持久化是指使用AsyncStorage模块存储了数据后，即使关闭了app，只要下次打开依然可以读取到已存储的数据，它包含4个操作：存储、获取、移除和合并，存储数据的方式是Map存储，即(key, value)。另外，无论是key还是value都只支持字符串格式，其它格式将会报错（如果要存储对象格式的数据，可以通过JSON.stringify先把对象转化为字符串格式）。
单一数据操作
封装好...
本文主要介绍react-native项目工程初始化后如何在虚拟机上跑起来，由于react-native目前最新版本0.65.2需要xcode版本大于12，系统需要升级，所以本次react-native版本定位0.63.3。
react-native 0.63.3
node v12.10.0
React-Native初始化
官方环境搭建地址 https://reactnative.cn/docs/environment-setup
提示：这里可以添加要学的内容
1、 搭建 Java 开发环
				
在React Native 中由于业务的需要, 我们往往要在诸多的页面间，组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证，稳定好用的方式给大家
React Navigation 导航传值
推荐指数: ♥ ♥ ♥ ♥ ♥
适用范围: 相邻页面间传值
兼容性: IOS/Android
原理: React Navigation 为页面的 props 上挂载了 navigation 对象, ...
				
在Vue中使用async/await主要是为了在一些异步操作中等待数据返回后再进行下一步操作，以避免出现数据未返回就执行下一步操作的错误。
如果在if语句中需要使用async/await，可以采用如下的方式实现：
1. 定义一个async函数，将需要等待的操作放在其中。
2. 使用if语句判断是否需要执行该操作。
3. 在if语句块中调用该async函数，并使用await等待其返回数据。
async function getData() {
  const res = await fetch('http://xxx.com/getData');
  return res.json();
if (needGetData) {
  const data = await getData();
  // 在这里使用获取到的数据进行操作
这样，当needGetData为true时，才会执行获取数据的操作，并且等待该操作完成后再执行后续操作。如果needGetData为false，则不会执行获取数据的操作，直接执行后续操作。
需要注意的是，async/await只能在异步函数中使用，如果在同步函数中使用会报错，因此需要将需要使用async/await的代码放在异步函数中才能使用。