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);
})

 

posted on 2021-01-07 17:07  青小记  阅读(3390)  评论(0编辑  收藏  举报