zoukankan      html  css  js  c++  java
  • vue get类型接口调用方式

      以下为本人总结的目前为止用过的get类型接口,包含带参数和不含参数两种情况,下面为代码示例,其中导入的axios需要针对项目进行封装,参考https://blog.csdn.net/xiehaiyanli/article/details/108114497

    1、有参数类型 params

    (1)

      api.js文件

    import axios from '../libs/api.request';
    
    export const getDataByTabName = (params, cb, err) => {
        axios.request({
            url: `h5/tab`,
            method: 'get',
            params
        }).then(cb)
        .catch(err)
    };

      vue文件。导入接口,调用接口,并通过getData获取接口数据

    import { getDataByTabName } from "./api";
    
    let params = {
     name: '***'
    };
    getDataByTabName(params, res => {
        if(res.data) {
            this.getData = res.data.data;
        } else {
            Notify({ type: 'danger', message: '获取数据错误' });
        }
    }, err => {
        Notify({ type: 'danger', message: '服务器错误'+err });
    })        

    (2)

      api.js文件

    import axios from '@/libs/api.request'
    
    export const getDataByTabName = (params) => {
      return axios.request({
        url: `h5/tab`,
        method: 'get',
        params,
      })
    };

      vue文件

    import { getDataByTabName } from "./api";
    
    let params = {
     name: '***'
    };
    getDataByTabName(params).then(res=>{
        this.getData = res.data.data;
    })

    (3)

      api.js文件

    import axios from '@/libs/api.request'
    export const getDataByTabName = (params,cb) => {
        axios.request({
            url: `h5/tab`,
            method: 'get',
            params,
        }).then(cb);
    }

      vue文件

    import { getDataByTabName } from "./api";
    let params = {
     name: '***'
    };
    getDataByTabName(params,res=>{
        if(!res.data.data){
            this.$Message.error(res.data.message);
            return;
        }else{
            this.getData = res.data;
        }
    })

    2、无参数类型

    (1)

      api.js文件

    import axios from '@/libs/api.request'
    
    export const logout = () => {
      return axios.request({
        url: `${MODULE_URL}/loginOut`,
        method: 'get'
      })
    }

      vue文件

    logout({}).then(res => {
        if (res.data.status) {
            let (data,message} = res.data;
            this.getData= data.data
        }else{
            this.$Message.error(message);
            return;
        }).catch(err => {
            this.$Message.error(message);
        })
    }
    //或者
    logout().then(res => {
        this.getData = res.data
    })

    (2)

      api.js文件

    import axios from '@/libs/api.request'
    
    export const getDataSourceName = (cb,err) => {
        axios.request({
            url:`${MODULE_URL}/getDataSourceName`,
            method:'get'
        }).then(cb)
        .catch(err)
    }

      vue文件

    getDataSourceName(res => {
        let {data,status,message} = {...res.data};
        if(!status) {
            console.log(message);
            return;
        }
        this.getData = data.data;
    },err => {
        this.$Message.error(err);
    })
  • 相关阅读:
    python面向对象的3个特点
    Redis-哈希槽
    PEP8 Python 编码规范
    每个人都要对自己进行5 项必要投资
    机器码和字节码
    python优缺点分析及python种类
    Zookeeper安装及运行
    Zookeeper简介与集群搭建
    Nginx Linux详细安装部署教程
    Nginx代理功能与负载均衡详解
  • 原文地址:https://www.cnblogs.com/qing0228/p/14247433.html
Copyright © 2011-2022 走看看