Vue前端异步方法

例子

java 复制代码
// 确认验证码
const clickSureCode=async()=>{
    let reslut = await UserSureCodeService(userInfo.value)
    console.log("异步后"+reslut.data)
    if(reslut.code === 0){
        ElMessage.success("邮箱验证成功")
        originEmail.value=reslut.value
        // 更改修改状态
        cancleEmail()
    }else{
        ElMessage.error(reslut.value)
    }

}

async()表示该方法是异步,await 表示在执行完UserSureCodeService 方法后,在执行接下来的console.log("异步后"+reslut.data )。如果不使用,这个data数据会是Undefine。

这里使用了Axios的简明写法。要使用Axios有以下步骤:

  1. npm install axios
  2. 在你的 JavaScript 文件中,使用 import 关键字引入 Axios。即import axios from 'axios';

可以在request中封装一系列方法。

java 复制代码
//导入axios  npm install axios
import axios from 'axios';
import{ElMessage} from 'element-plus'

import router from '@/router/router.js'
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        if(result.data.code===0){
            return result.data;
        }
        ElMessage.error(result.data.message)
        // 异步操作转为失败
        return Promise.reject(result.data);
    },
    err=>{
    //如果响应状态码时401,代表未登录,给出对应的提示,并跳转到登录页
         if(err.response.status===401){
            ElMessage.error('请先登录!')
            // 跳转到登录
            router.push('/login')
        }else{
                ElMessage.error('服务异常');
            }
        return Promise.reject(err);//异步的状态转化成失败的状态
    }   
)

//导入token状态
import { useTokenStore } from '@/store/token.js';


//添加请求拦截器
instance.interceptors.request.use(
    (config)=>{
        //在发送请求之前做什么
        let tokenStore = useTokenStore()
        //如果token中有值,在携带
        if(tokenStore.token){
            config.headers.Authorization=tokenStore.token
        }
        return config
    },
    (err)=>{
        //如果请求错误做什么
        Promise.reject(err)
    }
)


export default instance;

这里封装了一个对象instance,它又Aixos创建而来,还给他添加了拦截器功能。

应用

java 复制代码
import request from  '@/utils/request.js'
 
// 登录
export const loginUserService=(registerData)=>{
    const params = new URLSearchParams()
    for (let key in registerData){
        params.append(key,registerData[key])
    }
    return request.post('/user/login',params)
}

首先导入request.js,utils是我自己的创建的包,这里只是路径而已。此时前端要访问后端方法路径,只需要request.post或request.get即可。

相关推荐
大怪v1 天前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍1 天前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲1 天前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_1 天前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒1 天前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风1 天前
关于手机的设备信息
前端
ReturnTrue8681 天前
nginx性能优化之Gzip
前端
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮1 天前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码