使用async await 封装 axios的方法


Posted in Javascript onJuly 09, 2018

es6 的promise 逐步解决了层层回调的问题,es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求都可以使用同步写法,同时处理错误信息等,可以建一个api.js文件,全局创建api实例.

import axios from 'axios'
const qs = require('qs')
const api = {
 async get (url, data) {
  try {
   let res = await axios.get(url, {params: data})
   res = res.data
   return new Promise((resolve) => {
    if (res.code === 0) {
     resolve(res)
    } else {
     resolve(res)
    }
   })
  } catch (err) {
   alert('服务器出错')
   console.log(err)
  }
 },
 async post (url, data) {
  try {
   let res = await axios.post(url, qs.stringify(data))
   res = res.data
   return new Promise((resolve, reject) => {
    if (res.code === 0) {
     resolve(res)
    } else {
     reject(res)
    }
   })
  } catch (err) {
   // return (e.message)
   alert('服务器出错')
   console.log(err)
  }
 },
}
export { api }

上述代码中,首先采用try,catch 捕获请求的错误, 如果网络状态差,服务器错误等 ,然后在请求成功状态中,亦可统一处理请求代码,这个可以根据具体项目处理,上例表示code=0的时候为结果正确状态.

使用可以参考如下,以vue项目为例:

import { api } from 'common/js/api'

export default {
 data () {
  return {
   list: [],
  }
 },
 created () {
  this.getList()
 },
 methods: {
  async getList () {
   let {data} = await api.get('/ferring/test/list')
   console.log(data)
   this.list = data
  }
 },
}

有时候我们可能想比如错误处理能通过vue的一些组件比如toast这样的弹出,但是这个api.js不是在项目中,那该如何用呢, 下面以vue项目为例简述:

有些ui库,比如element ui这种,已经将toast这种做成了插件,可以直接用this示例打开弹窗

<template>
 <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$alert('这是一段内容', '标题名称', {
     confirmButtonText: '确定',
     callback: action => {
      this.$message({
       type: 'info',
       message: `action: ${ action }`
      });
     }
    });
   }
  }
 }
</script>

以上代码摘自element Ui ,如果想全局处理,在api.js中,如何获取vue的this示例呢,在main.js里面,可以将vue实例挂载在window对象上

/* eslint-disable no-new */
window.wm = new Vue({
 el: '#app',
 router,
 render: h => h(App),
})

那么回到刚刚的api.js ,则可以直接在resolve 或者catch的情况下,调用 window.wm.$alert,这样就可以借用vue的插件形式调用弹窗组件了.

如果没有这种用this调用的 弹窗组件,我们也可以写一个放在app.vue下, 然后通过vuex全局控制,

那么可以在api.js中引入store

import store from '../store'

在catch 或者 resolve条件下

store.commit('showDialog',{true,'请求出错'})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
javascript中如何判断类型汇总
May 14 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 #Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
JS实现图片旋转动画效果封装与使用示例
Jul 09 #Javascript
JavaScript的Object.defineProperty详解
Jul 09 #Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 #Javascript
mac上配置Android环境变量的方法
Jul 08 #Javascript
vue.js使用watch监听路由变化的方法
Jul 08 #Javascript
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
php正则表达式(regar expression)
2011/09/10 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
accesskey 提交
2006/06/26 Javascript
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
Python实现端口复用实例代码
2014/07/03 Python
pycharm安装图文教程
2017/05/02 Python
基于python时间处理方法(详解)
2017/08/14 Python
python字符串格式化方式解析
2019/10/19 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
女大学生自我鉴定
2013/12/09 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
小学国庆节活动方案
2014/02/11 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android