Vue3 Composition API用email-js 3.2.0发Gmail遇超时错误

问题描述 #

在Vue3 Composition API环境中，使用EmailJS 3.2.0版本向Gmail账户发送邮件，已完成所有配置且网络连接正常，但控制台始终抛出net::ERR_TIMED_OUT错误。以下是使用的代码：

模板与脚本代码 #

<q-dialog class="gt-sm"  v-model="dialog">
  <div align="center">
    <q-card  class="my-card" align="center">
      <q-card style="padding-top:20px;" align="center">
        <p>Place Reservation Order</p>
        <q-form method="post" @submit.prevent="Submit" style="max-width:280px;" align="center">
          <q-input label="Name" id="name" v-model="name">
            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>
          </q-input>

          <q-input label="Phone number" id="phone" v-model="phone">
            <template v-slot:prepend>
              <q-icon name="call"/>
            </template>
          </q-input>

          <q-input label="Table number" id="table" v-model="table">
            <template v-slot:prepend>
              <q-icon name="table"/>
            </template>
          </q-input>

          <q-input label="Food" id="food" v-model="food">
            <template v-slot:prepend>
              <q-icon name="money"/>
            </template>
          </q-input>

          <q-btn flat color="blue" type="submit" label="Send"></q-btn>
        </q-form>
      </q-card>
    </q-card>
  </div>
</q-dialog>
</template>

<script>
import {ref} from 'vue' 
import TastyHeader from '../components/TastyHeader.vue'
import emailjs from 'emailjs-com'
export default {
  components:{
    TastyHeader
  },
  setup(){
    const name =ref('')
    const food = ref('')
    const table =ref('')
    const phone = ref('')

    const Submit=()=>{
      var param = {
        table: table.value,
        phone: phone.value,
        food: food.value,
        name: name.value
      }
      emailjs
        .send('service_disx46e', 'template_3y41wc8',param,'user_1Y8lbGgVXBoY0P8yd')
        .then(
          (result) => {
            console.log('SUCCESS!', result.status, result.text)
          },
          (error) => {
            console.log('FAILED...', error)
          }
        )
      const newTodo = {
        table: table.value,
        phone: phone.value,
        food: food.value,
        name: name.value
      }
      console.log('newTodo:', newTodo)
    }
    return{
      Submit,
      table,
      phone,
      food,
      name,
      dialog:ref(false)
    }
  }
}
</script>

解决方案 #

1. 替换为官方推荐的新版包 #

EmailJS 3.x版本后，emailjs-com已被标记为旧版，官方推荐使用@emailjs/browser包，旧包可能存在网络请求适配问题。执行以下命令替换：

npm uninstall emailjs-com
npm install @emailjs/browser

修改代码中的导入和调用：

import emailjs from '@emailjs/browser'

const Submit = () => {
  const param = {
    table: table.value,
    phone: phone.value,
    food: food.value,
    name: name.value
  }
  emailjs.send('service_disx46e', 'template_3y41wc8', param, 'user_1Y8lbGgVXBoY0P8yd')
    .then(res => console.log('SUCCESS!', res))
    .catch(err => console.log('FAILED...', err))
}

2. 排查网络拦截因素 #

• 关闭浏览器的广告拦截、隐私保护类插件，这类插件可能会拦截EmailJS的请求
• 切换至手机热点或其他非受限网络环境测试，排除公司/校园网络代理的拦截
• 检查本地防火墙设置，确认允许向EmailJS服务器发起请求

3. 核对EmailJS配置细节 #

• 再次确认service ID、template ID、user ID与EmailJS后台完全一致，注意大小写和特殊字符
• 检查EmailJS模板中的变量名与你传入的param对象键名是否匹配（比如模板中用{{name}}，你传的是name，代码中这点是正确的，但需再次核对）
• 确认目标Gmail邮箱已绑定到EmailJS账户，且邮箱的相关权限（如允许第三方应用访问）已开启

4. 调整请求超时时间 #

可以通过配置参数延长请求超时时间，避免因网络波动导致超时：

emailjs.send('service_disx46e', 'template_3y41wc8', param, {
  publicKey: 'user_1Y8lbGgVXBoY0P8yd',
  timeout: 15000 // 设置为15秒超时
})

代码优化建议 #

将dialog变量的声明移至setup开头，保持变量声明统一，提升代码可读性：

setup(){
  const dialog = ref(false)
  const name = ref('')
  const food = ref('')
  const table = ref('')
  const phone = ref('')

  // ... 其他代码

  return{
    Submit,
    table,
    phone,
    food,
    name,
    dialog
  }
}

内容的提问来源于stack exchange，提问作者Revaycolizer