vue调接口的2种写法

方法一：

1、例如在  src/api/post.js 文件：

import request from '@/utils/request'


//获取数据
const get = (param) => {
    return request({
        url: '/api/post/get',//接口url
        method: 'post',
        params: param
    })
}

export default {
    get,
}

2、在需要调接口的vue文件引入api，命名为 newest ：

import newest from '@/api/newest'

3、可以通过 newest.list() 调用：

newest.get(paramObj).then(res =>{
                    if(res.code==0){
                        ... ...
                    }else{
                        ... ...
                    }
                })

方法二：

1、同上，在api.js文件：

import request from '@/utils/request'

export function get(paramObj) {
  return request({
    url: '/api/post/get',//接口url
    method: 'post',
    params: paramObj
  })
}

2、在需要调接口的vue文件引入api

import { get } from '@/api/newest'

3、直接 get() 调用：

get(paramObj).then(res =>{
                    if(res.code==0){
                        ... ...
                    }else{
                        ... ...
                    }
                })

方法二不能像方法一那样通过 obj.函数名 的方式调接口，如果该页面需要调的接口比较多的时候，在第二步 import 那里会写得很长。情况如下：

import { get , get1 , get2 , get3 , get4 ... ... } from '@/api/newest'

所以感觉方法一更好一些！