使用async await 封装 axios
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.datareturn 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.datareturn 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,'请求出错'})
复制代码
查看原文blog.noob6.com/2018/07/07/…
使用async await 封装 axios相关推荐
- axios的二次封装与async,await的配合使用?
前言:前些日子读文章,说是vue3.0会在明年下半年正式推出,改动的地方好像也不少,比如说vue3.x的代码库将会用typescript编写,并提供改进的 TypeScript 支持.变化还是很快的, ...
- axios 进行同步请求(async+await)
介绍 Axios 是一个基于 promise 的 HTTP 库,它支持 Promise API. 像这样: axios.post('getsomething').then(res => {// ...
- async function_Electron IPC 通信如何使用 async/await 调用?
前言碎语 此想法是在使用 electron 进程间通信(IPC)过程中,无法忍受其 API 的使用不友好性而产生. 为了提高代码可读性.可维护性,而不得已造轮子了. 生命在于折腾,其乐无穷. Elec ...
- Vue二次封装axios为插件使用
照例先贴上 axios 的 gitHub 地址 不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-re ...
- vue-cli 初始化创建 vue2.9.6 项目路由守卫、封装axios、vuex
阅读目录 Vue如何封装Axios请求 1 安装axios 2 封装代码 axios 应用方式 Vue 中的路由守卫 使用演示 1 全局守卫 2 组件级守卫 3 单个路由独享的守卫 4 官网整个路由守 ...
- 【axios】封装axios
一.axios简介 定义 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.(本文围绕XHR) axios提供两个http请求适配器,XHR和HTTP. ...
- 在项目中用ts封装axios
写在前面 虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就 ...
- 如何封装axios请求。统一基地址、加载遮罩层、响应参数优化
gitee地址:https://gitee.com/mengxianchen/axios-request-tool 线上体验地址: http://121.43.41.227:82/ 浏览器网络设 ...
- vue3+vite+ts 封装axios踩坑记录
注意注意注意!!踩坑记录非教程示例,别跟着我进坑里,太胖我可能捞不起来(ÒωÓױ). 安装axios:npm install axios src文件夹下创建api和utils文件夹,utils里创建r ...
最新文章
- php 清空cache,到底如何清除 cache? 我真的快瘋了
- SQL优化这么做就对了
- 【Keras】基于SegNet和U-Net的遥感图像语义分割
- 一个可供参考的Java高并发异步应用案例--转
- python梦幻西游鼠标偏移_PYTHONPYGAME如何向鼠标位置移动和旋转多边形?
- OpenCV计算时刻calculate moments的实例(附完整代码)
- 电话骗术升级了,提高警惕! (转自公司内部新闻组,真人真事)
- 数学无用论??我们欠孩子真正的数学阅读
- python幂运算的符号有哪些及画法_SymPy 符号计算基本教程
- 微程序控制器的组成及原理总结
- 天瑞地安科技集团:APP软件如何优化
- 《One-shot Voice Conversion by Separating Speaker and Content Representations with Instance Normaliz》
- 影集制作php源码_php 源码编译
- 论文笔记:主干网络——DenseNet
- 机器学习与算法(8)--局部加权学习算法(LWR)
- Android 用 broadcast receiver组件实现音乐盒
- 查了一下平板电视的价格行情
- STM32 | STM32CubeMX基础之TIM
- JSP 编译和运行过程与JSP源码简单分析
- Nignx 网关 和 GateWay网关