odciexttableopen 调用出错 error open log_vue请求方法封装与调用之async await 配合 async await使用

/**
* @description: axios post请求
* @param {string} url 请求路径
* @param {object} params 请求参数
* @return: 
*/
async post(uri="", params={}) {
   try {
	return  await axios.post(api.path + uri, qs.stringify(params))
   } catch (err) {
	console.log(err)
  }
}

	/**
	 * @description: axios get请求
	 * @param {string} uri 请求路径
	 * @param {object} params 请求参数
	 * @return: 
	 */
	async get(uri="", params={}) {
		try {
			return  await axios.get(api.path + uri, {
				params: params
			})
		} catch (err) {
			console.log(err)
		}
	},

    /**
     * 确认提交请求  若不用async await 返回的肯定是一个promise
     * @method async await 配合 async await 使用 
     * @param Object
     * @return undefined
     */
    async confirmFn() {
      let params = this.scFrom;
      const res = await  api.post(`${api.URI.save}`, params);
      //处理相关的业务
      console.log("res:",res)
    }

Promise对比 async await

Async/await的坑

那么使用async/await时会出现什么错误？以下一些常见的情况。

太顺序了

虽然await可以使您的代码看起来像同步，但请记住它们仍然是异步的，必须注意避免过于顺序

简单地说，您仍然需要异步考虑工作流，然后尝试同步编写代码await。在复杂的工作流程中，直接使用promises可能更容易。

错误处理

使用promises，异步函数有两个可能的返回值：已解析的值和被拒绝的值。我们可以.then()用于正常情况，.catch()用于特殊情况。但是，async/await错误处理可能会很棘手。

try…catch

最标准的（我推荐的）方法是使用try...catch语句。当一个await调用时，任何被拒绝的值都将作为异常抛出。这是一个例子：

atch的错误正是被拒绝的值。在我们发现异常后，有几种方法来处理它：

1. 处理异常，并返回正常值。（不在catch块中使用任何return语句，这等同于使用return undefined，也是正常值。）
2. 抛出它，如果你想让调用者处理它。可以直接抛出普通的错误对象throw error，这在promise链中允许使用async getBooksByAuthorWithAwait()函数（即仍然可以像这样调用它getBooksByAuthorWithAwait().then(...).catch(error => ...)）; 或者可以使用Error对象包装错误，例如throw new Error(error) ，当控制台中显示此错误时，将提供完整的堆栈跟踪。
3. 拒绝它，就像return Promise.reject(error) 。这相当于throw error不推荐。

使用try...catch的好处是：

• 简单，传统。只要您有Java或C++等其他语言的经验，就不会有任何困难。
• 如果不需要每步执行错误处理，仍然可以在一个try...catch块中包装多个await调用在一个位置处理错误。

这种方法也存在一个缺陷。由于try...catch将捕获块中的每个异常，因此将会捕获一些通常不会被promises捕获的异常。想想这个例子

运行此代码，您将在控制台中收到ReferenceError: cb is not defined错误。错误是由console.log()输出而不是JavaScript本身。有时这可能是致命的。如果BookModel被深深地包含在一系列函数调用中，并且其中一个调用吞噬了错误，那么找到这样的未定义错误将非常困难。

OK 使函数返回两个值

另一种错误处理方式受Go语言的启发。它允许异步函数返回错误和结果。有关详细信息，请参阅此博客文章： How to write async await without try-catch blocks in Javascript

简言之，您可以使用这样的await函数：

  //引入to.js
 // to.js方法中附加拦截器，该方法将接收原始错误对象，记录它或在传回之前执行您需要做的任何操作
export default function to(promise) {
    return promise.then(data => {
       return [null, data];
    })
    .catch(err => [err]);
 }
//使用
 async confirmFn() {
      let err, result;
      let params = this.scFrom; 
      [err, result] =  await to(api.post(`${api.URI.save}`, params));
      if(err) throw new Error('save api is failed!');
      //处理相关的业务
      console.log("result:",result, "err:",err)
      
    }

我个人不喜欢这种方法，因为它将Go风格带入JavaScript，感觉不自然，但在某些情况下，这可能非常有用。

使用.catch

我们将在这里介绍的最后一种方法是继续使用 .catch()。

回想一下await的功能：它将等待promise完成其工作。再回想一下，promise.catch()也将是一个promise,所以我们可以像这样编写错误处理：

这种方法有两个小问题：

1. 它是promises和await函数的混合体。您仍然需要了解promises的工作原理。
2. 错误处理在正常路径之前进行，这样不直观。

结论

ES7引入的关键字async/await肯定是对JavaScript异步编程的改进。它可以使代码更容易阅读和调试。然而，为了正确使用它们，必须完全理解promise，因为它们只不过是语法糖，而潜在的技术仍然是promise。