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'

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