阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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.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
            }
          },
        }
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      本文目录
      目录