一文详解vue3项目实战中的接口调用
作者：XSL_HR
在企业开发过程中,往往有着明确的前后端的分工,前端负责接收、使用接口,后端负责编写、处理接口,下面这篇文章主要给大家介绍了关于vue3项目实战中的接口调用的相关资料,需要的朋友可以参考下
前言
在企业开发过程中，有着明确的前后端分工，前端负责接收、使用接口，后端负责编写、处理接口。本期文章将会详细讲解 如何使用接口。
vue项目组成
一个项目往往由这几个部分组成。👇👇
其中在src文件夹中的内容如下👇👇
我们常常将接口文件，新建在文件夹src下，一般命名为api，api内的文件便是接口文件。👇👇
接口调用具体内容
通常把后端的接口写在api文件夹下，命名采用驼峰命名法，比如loginApi、orderApi、countApi等等。
loginApi.ts内容
源码：
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
})
}
request.ts内容
（axios请求需要安装 /store为跨域处理） 后期文章将进行补充讲解
源码：
// 引入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
vite.config.ts文件：
项目的页面往往写在view中，每个页面设一个文件夹，其中xxx.vue内容则是本页面的内容。
在页面中，如果我们需要使用某个接口。则需要进行引入操作。
import {接口名1、接口名2} from ' api文件地址 '
// from后所跟的就是api中文件的地址路径
import { userLoginApi } from '../api/loginApi';
接口往往是在方法中进行调用，对于不同接口 ，需要的参数也不一样，根据需求，我们传入对应的参数即可。
接口的使用格式：
调用接口有三种方式：
fetchasync/awaitaxios后期文章持续更新 详细讲解
fetch方法：
接口名({参数1:页面中的参1，参数2：页面中的参数2}).then(res => {
console.log(res)
//res就是调用接口后，后台返回过来的结果，一般数据储存在res.data.data中，具体情况而论
})
async await方法：
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)
}
以上就是接口调用的全部过程了。可以在按F12打开控制台查看调用结果。
总结
到此这篇关于vue3项目实战中的接口调用的文章就介绍到这了,更多相关vue3项目接口调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！