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即可。

相关推荐
coding随想1 小时前
JavaScript中的系统对话框:alert、confirm、prompt
开发语言·javascript·prompt
LuckyLay1 小时前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu1681 小时前
aksk前端签名实现
java·前端·javascript
烛阴1 小时前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw02 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦2 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
Brilliant Nemo2 小时前
集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
javascript
嘉琪0012 小时前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
南岸月明2 小时前
我与技术无缘,只想副业搞钱
前端