zoukankan      html  css  js  c++  java
  • vue项目使用async await 封装 axios

    es6的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 }

    使用可以参考如下

      import { api } from 'common/js/api'
      export default {
        data () {
          return {
            list: [],
          }
        },
        created () {
          this.getList()
        },
        methods: {
          async getList () {
            let {data} = await api.get('/test/list')
            console.log(data)
            this.list = data
          }
        },
      }
  • 相关阅读:
    002使用代码和未经编译的XMAL文件创建WPF程序
    001使用代码创建WPF应用程序
    制作地图PPT
    数据库基本知识学习(sql server)
    虚拟现实技术对人类是福还是祸?
    计算机中的数学
    软件架构
    extracts
    bootstrap
    omron欧姆龙自动化应用
  • 原文地址:https://www.cnblogs.com/lhy-555/p/10905419.html
Copyright © 2011-2022 走看看