新手接接口记录帖

前提：已经封装好了axios

1.在src下新建一个api文件夹，专门用于存放api的js文件

2.在api文件夹下新建js文件

2.1 引入request请求

import request from '封装axios的文件地址'

 2.2 写入接口

// 无需参数
export const function = () => {
    return request({
        url: 基础url + "/XXXX/XXXX/XXXX"（接口地址）,
        methods: "get"/"post"
    });
};


// 需要传参
export const getData = params => {
    return request({
        url: 基础url + "/XXXX/XXXX/XXXX"(接口地址）,
        methods: "get"/"post",
        params
    });
}

// function可以自己命名

//有参数的request请求里面记得加params

// request里面用逗号分隔

3.获取接口数据

在需要接口数据的vue页面里

3.1 导入接口

import { getData } from '@/api/XX.js'

// 注意一定要用{}，因为getData是一个函数，不是一个组件

3.2 methods里写入

下面为一种方法，也可以用async……await

methods: {
    getXXData() {
        let params = {
        // 后端规定要传的参数： 你要传的值
        }
        getData(params).then(res => {
            console.log(res)
        })
    }
}

3.3 调用

在created里面调用，页面一创建即请求后台数据

created() {
    this.getXXData();
}

tips：

1.请求数据的时候一般情况下会搭配loading使用

2.在函数中定义一个空数组接收接口数据res进行赋值性能更好