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

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: {
  }
})