Giter Club home page Giter Club logo

vue-api-creator's Introduction

vue-api-creator

Build Status Coverage Status codebeat badge

An api manager bases on axios

中文文档

Usage

Install

npm install vue-api-creator -S
import api from './api'
import ApiCreator from 'vue-api-creator'

Vue.use(ApiCreator, {
  baseURL: '/baseURL'
  modules: api,
  // Response fails if response status is in this list
  permanentErrors: [404, 415, 500, 501, 429],
  beforeRequest (options) {
    console.log(options)
  },
  afterRequest (res) {
    console.log(res)
  },
  onError (err) {
    if (err.isInternalError) {
      console.log('An exception has occurred on your network')
    } else {
      console.log('An error response from server')
    }
  },
  mock: 'https://www.xxxx.com'
})

Use

export default {
    created () {
        this.$api('app/list').then(res => {
            // ....
        }).catch(err => {
            // ....
        })
    }
}

Api directory

├──  api
    │── app
        ├── index.js
    └── index.js   

app/index.js

export default {
    BASE_URL: '/sys/app',
    api: [
      {
        name: 'list',
        desc: 'get apps',
        method: 'GET',
        path: 'list',
        mock: true // enable mock
      }
    ]
}

api/index.js

import app from './app'

export default {
    app
}

Server Response Structure

Your server response body shoule be like this:

{
  code: Number, // status code
  success: Boolean, // whether the response was successful 
  msg: String, // response message
  data: <T> // response data
}

Configuration

ApiCreator config

  • baseURL: The base URL of the request. (String or Function)
  • modules: Api modules.
  • axios: axios instance.
  • enableEncodeURIComponent: encodes characters using EncodeURIComponent.
  • permanentErrors: Response fails if response status is in this list, default: [404, 415, 500, 501, 429].
  • beforeRequest: Called before the request is sent.
  • afterRequest: Called after the request was received.
  • onError: An error occurred during send request or server response, eg: status code in permanentErrors, the request was made but no response was received...
  • mock: The base URL of the mock server.

Api config

  • name: It is api's name.
  • desc: The description of the api.
  • method: The request method to be used when making the request.
  • path: It is the server URL that will be used for the request.
  • mock: Enable mock to the request.
  • params: query params (Array or Boolean). eg: params: ['id', 'name'] => /api/xxxx?id=1&name=2
  • body: body params (Array or Boolean). eg: body: ['ids', 'names'] => {ids: [1], names: ['a', 'b']}
  • responseType: response type. accepted values: ['', 'arraybuffer', 'blob', 'document', 'json', 'text']. default: json

License

MIT

Copyright © 2019, msidolphin

vue-api-creator's People

Contributors

dependabot[bot] avatar msidolphin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

lixianmover

vue-api-creator's Issues

关于打包域名的解决方案之奇思妙想?

长话短说:
之前一直纠结一个问题就是如何动态的传入参数改变当前打包以后项目axios访问路径.
譬方说我 npm run build 后面加入参数 host=fl.np
那么打包到线上环境的接口访问的地址的前缀都是fl.np

前几天同事 克里斯多夫·奇奇突然奇思妙想 将项目config文件下test.env.js文件中的BASE_URL改为"''"

image

此时用nginx代理打包构建够的项目 惊讶的发现

此时项目axios所有接口访问的地址前缀跟地址栏的域名是一样的?

image

就像问问大佬,这样搞行不行,有啥后遗症不?

----之前为了解决这个问题是在自定义的cus文件里面截取了构建命令的参数 手动设置的
image


疫情当前,共克时艰,风雨同舟,不畏艰险!

如何用js调用本地客户端

纯技术讨论,与本项目无关大佬给点意见.

类似于百度网盘,在web点击链接直接可以启动本地的客户端,如果没有下载客户端就提醒下载

看了一些攻略是修改注册表,每个用户下载安装的地址不一样,还有参数如何传递?

大佬有时间帮忙看看,谢谢

来自忠实的粉丝 克里斯·东仔的提问

本项目如何处理前台登录问题

公司前台项目用的是大佬你的api-creator 后台用的是 vue-admin-element
image

最近在做登录这一块 然后调用接口的时候vue-admin-element用的是如下方式:

image

在这个方法里面套用 this.$api(...)直接报错了:this.$api is not a function

请问有什么好的处理方法吗?

优雅的捕捉全局错误????

用了大佬您的vue-api-creator 在捕捉全局错误里有个问题就是:
有时无法正确捕捉到 错误信息

目前有三种 形式的错误信息
1.网络错误
2.自己定义的错误
3.系统错误,springboot自动封装的错误信息

main.js里面的代码如下:

image
看着怪怪的,总觉得哪里不对劲.
个人优化的代码如下:
image
kan看了下 总感觉怪怪的 代码太臃肿了

之前为了支持'blob'类型的返回数据 外面还判断了一层

image

难以阅读 ,这样写下去项目可维护性太差了

请大佬帮忙指点迷津,祝大佬新年快乐,来世我必结草衔环以报之

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.