使用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 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
fastadmin中调用js的方法
May 14 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
分享php邮件管理器源码
2016/01/06 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python多线程同步实例教程
2019/08/11 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
高中毕业的自我鉴定
2013/12/09 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
支部鉴定材料
2014/06/02 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
慰问信格式规范
2015/03/23 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang
Python OpenCV超详细讲解基本功能
2022/04/02 Python
讲解MySQL增删改操作
2022/05/06 MySQL