es6 的promise 逐步解決了層層回調(diào)的問題,es8的async await讓異步變成了同步的寫法,在vue中,可以通過封裝axios,使得所有的請求都可以使用同步寫法,同時(shí)處理錯(cuò)誤信息等,可以建一個(gè)api.js文件,全局創(chuàng)建api實(shí)例.

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('服務(wù)器出錯(cuò)')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('服務(wù)器出錯(cuò)')console.log(err)}}, } export { api } 復(fù)制代碼

上述代碼中,首先采用try,catch 捕獲請求的錯(cuò)誤, 如果網(wǎng)絡(luò)狀態(tài)差,服務(wù)器錯(cuò)誤等 ,然后在請求成功狀態(tài)中,亦可統(tǒng)一處理請求代碼,這個(gè)可以根據(jù)具體項(xiàng)目處理,上例表示code=0的時(shí)候?yàn)榻Y(jié)果正確狀態(tài). 使用可以參考如下,以vue項(xiàng)目為例:

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}},} 復(fù)制代碼

有時(shí)候我們可能想比如錯(cuò)誤處理能通過vue的一些組件比如toast這樣的彈出,但是這個(gè)api.js不是在項(xiàng)目中,那該如何用呢, 下面以vue項(xiàng)目為例簡述: 有些ui庫,比如element ui這種,已經(jīng)將toast這種做成了插件,可以直接用this示例打開彈窗

<template><el-button type="text" @click="open">點(diǎn)擊打開 Message Box</el-button> </template><script>export default {methods: {open() {this.$alert('這是一段內(nèi)容', '標(biāo)題名稱', {confirmButtonText: '確定',callback: action => {this.$message({type: 'info',message: `action: ${ action }`});}});}}} </script> 復(fù)制代碼

以上代碼摘自element Ui ,如果想全局處理,在api.js中,如何獲取vue的this示例呢,在main.js里面,可以將vue實(shí)例掛載在window對象上

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

那么回到剛剛的api.js ,則可以直接在resolve 或者catch的情況下,調(diào)用 window.wm.$alert,這樣就可以借用vue的插件形式調(diào)用彈窗組件了. 如果沒有這種用this調(diào)用的 彈窗組件,我們也可以寫一個(gè)放在app.vue下, 然后通過vuex全局控制, 那么可以在api.js中引入store

import store from '../store' 復(fù)制代碼

在catch 或者 resolve條件下

store.commit('showDialog',{true,'請求出錯(cuò)'}) 復(fù)制代碼

查看原文blog.noob6.com/2018/07/07/…

總結(jié)

以上是生活随笔為你收集整理的使用async await 封装 axios的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。