[VUE学习】从头搭建权限管理系统前端2-请求与存储

ゝ一世哀愁。 2024-04-20 22:09 47阅读 0赞

## 1.导入请求工具类 ##

主要实现 请求拦截器 把token塞到header里面

相应拦截器没有写逻辑

封装 get set 文件上传 请求

// 引入axios
    import axios from 'axios';
    //可以存储状态
    import store from '@/store'
    
    let baseUrl="http://localhost:80/";
    // 创建axios实例
    const httpService = axios.create({
        // url前缀-'http:xxx.xxx'
        // baseURL: process.env.BASE_API, // 需自定义
        baseURL:baseUrl,
        // 请求超时时间
        timeout: 3000 // 需自定义
    });
    
    //添加请求和响应拦截器
    // 添加请求拦截器
    //相当于前置拦截器
    //发送请求之前 我们要把token 塞到header里面
    
    httpService.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        //config.headers.token=window.sessionStorage.getItem('token');
        console.log("store="+store.getters.GET_TOKEN)
        config.headers.token=store.getters.GET_TOKEN
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });
    
    // 添加响应拦截器
    httpService.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        return response;
    }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    
    /*网络请求部分*/
    
    /*
     *  get请求
     *  url:请求地址
     *  params:参数
     * */
    export function get(url, params = {}) {
        return new Promise((resolve, reject) => {
            httpService({
                url: url,
                method: 'get',
                params: params
            }).then(response => {
                resolve(response);
            }).catch(error => {
                reject(error);
            });
        });
    }
    
    /*
     *  post请求
     *  url:请求地址
     *  params:参数
     * */
    export function post(url, params = {}) {
        return new Promise((resolve, reject) => {
            httpService({
                url: url,
                method: 'post',
                data: params
            }).then(response => {
                console.log(response)
                resolve(response);
            }).catch(error => {
                console.log(error)
                reject(error);
            });
        });
    }
    
    /*
     *  文件上传
     *  url:请求地址
     *  params:参数
     * */
    export function fileUpload(url, params = {}) {
        return new Promise((resolve, reject) => {
            httpService({
                url: url,
                method: 'post',
                data: params,
                headers: { 'Content-Type': 'multipart/form-data' }
            }).then(response => {
                resolve(response);
            }).catch(error => {
                reject(error);
            });
        });
    }
    
    export function getServerUrl(){
        return baseUrl;
    }
    
    export default {
        get,
        post,
        fileUpload,
        getServerUrl
    }

## 2.编写测试请求 ##

<template>
      <el-button type="primary" @click="handleLogin">测试登录</el-button>
    
      <el-button type="danger" @click="handleUserList">测试获取用户请求</el-button>
    </template>
    
    <script setup>
    
    import request from '@/util/request'
    import store from '@/store'
    
    const handleLogin=async ()=>{
      let result = await requestUtil.get("test/login");
      let data = result.data;
      if(data.code = 200){
        const token= data.token;
        console.log("登陆成功 token = "+token)
        store.commit('SET_TOKEN',token)
      }else{
        console.log("登陆出错")
      }
    }
    
    const handleUserList=async ()=>{
      let result = await requestUtil.get("test/userList");
      let data = result.data;
      if(data.code = 200){
        const userList= data.userList;
        console.log("用户列表信息 userList = "+userList)
      }else{
        console.log("出错")
      }
    }
    
    </script>
    
    <style>
    
    </style>

## 知识点1： async() 是什么 ##

async 表示这个函数是异步函数，异步函数可以在函数内部使用`await`关键字来等待一个异步操作完成。在这里，`await`用于等待`requestUtil.get`方法返回的Promise对象，该方法发送HTTP GET请求到指定的URL。

异步操作是指在程序执行过程中，某个操作不会阻塞程序的执行，而是在后台进行，同时程序可以继续执行其他任务。

## 知识点2： store.commit('SET\_TOKEN',token) ##

这里用到了Vuex 是存储状态的

但是VUeX 默认情况下 在每次刷新会清空状态 所以我们把值存储到sessionStorage

import { createStore } from 'vuex'
    
    export default createStore({
      //vuex 这里刷新一下就没了
      state: {
      },
      getters: {
        GET_TOKEN:state => {
          return sessionStorage.getItem("token")
        }
      },
      mutations: {
        SET_TOKEN:(state,token)=>{
          sessionStorage.setItem("token",token)
        }
      },
      actions: {
      },
      modules: {
      }
    })