快捷導(dǎo)航

一文詳解vue3項目實戰(zhàn)中的接口調(diào)用

更新時間：2022年12月02日 11:10:32 作者：XSL_HR

在企業(yè)開發(fā)過程中,往往有著明確的前后端的分工,前端負責(zé)接收、使用接口,后端負責(zé)編寫、處理接口,下面這篇文章主要給大家介紹了關(guān)于vue3項目實戰(zhàn)中的接口調(diào)用的相關(guān)資料,需要的朋友可以參考下

前言

在企業(yè)開發(fā)過程中，有著明確的前后端分工，前端負責(zé)接收、使用接口，后端負責(zé)編寫、處理接口。本期文章將會詳細講解 如何使用接口。

vue項目組成

一個項目往往由這幾個部分組成。????

其中在src文件夾中的內(nèi)容如下????

我們常常將接口文件，新建在文件夾src下，一般命名為api，api內(nèi)的文件便是接口文件。????

接口調(diào)用具體內(nèi)容

通常把后端的接口寫在api文件夾下，命名采用駝峰命名法，比如loginApi、orderApi、countApi等等。

loginApi.ts內(nèi)容

源碼：

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

// 定義并導(dǎo)出請求接口函數(shù)userLoginApi 參數(shù)值為loginform 參數(shù)類型為userType
export function userLoginApi(loginform: userType) {
    return request({ // 返回request請求
        url: '/api/v1/user/member/private/login', // 請求接口的地址
        method: 'post', // 請求方式是post 還有g(shù)et等方法(了解)
        data: loginform // 請求的數(shù)據(jù)是loginform 在驗證請求的時候可能請求的值為value
    })
}

request.ts內(nèi)容

（axios請求需要安裝 /store為跨域處理）后期文章將進行補充講解

源碼：

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

// 創(chuàng)建axios實例
const request = axios.create({
    baseURL: '/store', // url = base url + request url
    timeout: 5000 // 5s超時
})

// 請求攔截器 一般寫法模式
request.interceptors.request.use(
    (response) => {
        return response // 請求成功則返回response
    },
    (error) => { // 請求失敗則顯示錯誤狀態(tài)
        message.error(error.message)
        return Promise.reject(error)
    }
)

// 響應(yīng)攔截器
request.interceptors.response.use(
    (response) => {
        return response
    },
    (error) => {
        message.error(error.message)
        return Promise.reject(error)
    }
) 

// 導(dǎo)出request
export default request

vite.config.ts文件：

項目的頁面往往寫在view中，每個頁面設(shè)一個文件夾，其中xxx.vue內(nèi)容則是本頁面的內(nèi)容。

在頁面中，如果我們需要使用某個接口。則需要進行引入操作。

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

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

接口往往是在方法中進行調(diào)用，對于不同接口，需要的參數(shù)也不一樣，根據(jù)需求，我們傳入對應(yīng)的參數(shù)即可。

接口的使用格式：

調(diào)用接口有三種方式：fetch async/await axios 后期文章持續(xù)更新詳細講解

fetch方法：

接口名({參數(shù)1:頁面中的參1，參數(shù)2：頁面中的參數(shù)2}).then(res => {
            console.log(res)
            //res就是調(diào)用接口后，后臺返回過來的結(jié)果，一般數(shù)據(jù)儲存在res.data.data中，具體情況而論 
            })

async await方法：

const handleFinish = async (value: any) => {  // 表單輸入完畢后點登錄調(diào)用handleFinish函數(shù)
    // async包裹handleFinish函數(shù)的參數(shù)value 傳參
    console.log(value)
    const {data:res} = await userLoginApi(value) // 對data解構(gòu)賦值 取出請求結(jié)果res data是請求接口中存放表單數(shù)據(jù)的變量
    // 先從請求接口的函數(shù)userLoginApi中獲取存入的表單數(shù)據(jù)value 然后用await包裹 賦值給請求結(jié)果res
    console.log(res)
    }

以上就是接口調(diào)用的全部過程了?？梢栽诎?strong>F12打開控制臺查看調(diào)用結(jié)果。