Vue.js/Laravel 中使用异步 await API 传递变量或值的实用指南

2024-03-18 00:41:38

在 Vue.js/Laravel 中使用异步 await API 传递变量或值的指南

简介

异步编程在现代 Web 开发中至关重要，使我们能够在不阻塞主线程的情况下执行耗时的操作。在 Vue.js/Laravel 生态系统中，我们可以使用 async/await 语法来简化异步 API 调用。本文将深入探讨如何在 Vue.js/Laravel 中使用异步 await API 传递变量或值，以实现流畅的通信。

设置请求主体

传递变量或值到异步 API 的第一步是正确设置请求主体。对于大多数 API 调用，我们需要将数据封装在请求主体中，以进行处理。在 Vue.js 中，可以使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 格式，然后将其作为请求主体传递。

服务器端处理

在服务器端，我们需要正确处理收到的请求。对于 Laravel 应用程序，建议返回 JSON 响应，而不是直接返回对象。这将确保 Vue.js 应用程序能够正确解析响应。

代码示例

Vue.js 代码：

const email = this.loginbus.loginemail

const body = { email: email };

await fetch('http://localhost:8000/api/checklogin', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(body)
})
  .then(response => {
    console.log(response)
  })
  .then(data => {
    console.log(data)
  })

Laravel 控制器代码：

public function checklogin(Request $request) {

  $getVerify = Makatibuspartner::where('email', $request->email)->select('email_verified_at')->first();           

  if (!$getVerify){
    return response()->json(["status" => 400, "error" => "Please enter an email/registered email"]);
  } else if ($getVerify && is_null($getVerify->email_verified_at)) {
    return response()->json(["status" => 400, "error" => "Not yet Verified"]);    
  } else {
    return response()->json(["status" => 200, "message" => "Verified"]);
  }  
}