一文详解vue3项目实战中的接口调用

import { userType } from '../types/login'
import request from '../utils/request'

// 定义并导出请求接口函数userLoginApi 参数值为loginform 参数类型为userType
export function userLoginApi(loginform: userType) {
    return request({ // 返回request请求
        url: '/api/v1/user/member/private/login', // 请求接口的地址
        method: 'post', // 请求方式是post 还有get等方法(了解)
        data: loginform // 请求的数据是loginform 在验证请求的时候可能请求的值为value
    })
}

// 引入axios封装
import axios from 'axios'
import { message } from 'ant-design-vue'

// 创建axios实例
const request = axios.create({
    baseURL: '/store', // url = base url + request url
    timeout: 5000 // 5s超时
})

// 请求拦截器 一般写法模式
request.interceptors.request.use(
    (response) => {
        return response // 请求成功则返回response
    },
    (error) => { // 请求失败则显示错误状态
        message.error(error.message)
        return Promise.reject(error)
    }
)

// 响应拦截器
request.interceptors.response.use(
    (response) => {
        return response
    },
    (error) => {
        message.error(error.message)
        return Promise.reject(error)
    }
) 

// 导出request
export default request 

import {接口名1、接口名2} from ' api文件地址 '
// from后所跟的就是api中文件的地址路径

import { userLoginApi } from '../api/loginApi';

接口名({参数1:页面中的参1，参数2：页面中的参数2}).then(res => {
            console.log(res)
            //res就是调用接口后，后台返回过来的结果，一般数据储存在res.data.data中，具体情况而论 
            })

const handleFinish = async (value: any) => {  // 表单输入完毕后点登录调用handleFinish函数
    // async包裹handleFinish函数的参数value 传参
    console.log(value)
    const {data:res} = await userLoginApi(value) // 对data解构赋值 取出请求结果res data是请求接口中存放表单数据的变量
    // 先从请求接口的函数userLoginApi中获取存入的表单数据value 然后用await包裹 赋值给请求结果res
    console.log(res)
    }