使⽤asyncawait封装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 {
await和async使用方法let res = (url, {params: data})
res = res.data
return new Promise((resolve) => {
if (de === 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 (de === 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 () {
},
methods: {
async getList () {
let {data} = ('/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条件下
storemit('showDialog',{true,'请求出错'})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。