Vue前端异步方法

最新推荐文章于 2025-03-12 13:55:46 发布

原创最新推荐文章于 2025-03-12 13:55:46 发布 · 856 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章介绍了如何在JavaScript中使用Axios进行异步请求，并配置了请求和响应拦截器，以及处理登录状态和token管理，以便在前端应用中简化API交互。

例子

// 确认验证码
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有以下步骤：

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

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

//导入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创建而来，还给他添加了拦截器功能。

应用

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