Wie werden Axios-Anfragen in vue3 gekapselt und in Komponenten verwendet?

1. Erstellen Sie einen Ordner zum Speichern des gepackten js

Ich habe ihn in src/request/axios.js erstellt

# 🎜🎜#2. Der Kapselungscode lautet wie folgt:

Kopieren Sie den folgenden Code direkt in request.js und kapseln Sie Get- und Post-Anfragen Adresse, tokenKey Ob es sich um ein Token handelt, ändern Sie es in den Namen des Tokens, den Sie lokal speichern

Sie können sich die Kommentare im Code ansehen, es ist leicht zu verstehen.

/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
import axios from 'axios';
import QS from 'qs';
import router from '../router/index'
//qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
//  let protocol = window.location.protocol; //协议
//  let host = window.location.host; //主机
//  axios.defaults.baseURL = protocol + "//" + host;
axios.defaults.baseURL = 'http://localhost:8888'
 
axios.interceptors.request.use( //响应拦截
        async config => {
            // 每次发送请求之前判断vuex中是否存在token        
            // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
            // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
            config.headers.token = sessionStorage.getItem('token')
            return config;
        },
        error => {
            return Promise.error(error);
        })
    // 响应拦截器
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response); //进行中        
        } else {
            return Promise.reject(response); //失败       
        }
    },
    // 服务器状态码不是200的情况    
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录                
                // 未登录则跳转登录页面，并携带当前页面的路径                
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:
                    break
                    // 403 token过期                
                    // 登录过期对用户进行提示                
                    // 清除本地token和清空vuex中token对象                
                    // 跳转登录页面                
                case 403:
                    sessionStorage.clear()
                    router.push('/login')
                    break
                    // 404请求不存在                
                case 404:
                    break;
                    // 其他错误，直接抛出错误提示                
                default:
            }
            return Promise.reject(error.response);
        }
    }
);
/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
const $get = (url, params) => {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                    params: params,
                })
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    }
    /** 
     * post方法，对应post请求 
     * @param {String} url [请求的url地址] 
     * @param {Object} params [请求时携带的参数] 
     */
const $post = (url, params) => {
        return new Promise((resolve, reject) => {
            axios.post(url, QS.stringify(params)) //是将对象 序列化成URL的形式，以&进行拼接   
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    }
    //下面是vue3必须加的，vue2不需要，只需要暴露出去get，post方法就可以
export default {
    install: (app) => {
        app.config.globalProperties['$get'] = $get;
        app.config.globalProperties['$post'] = $post;
        app.config.globalProperties['$axios'] = axios;
    }
}

3. Konfiguration

Führen Sie in main.js die js ein, die wir im ersten Schritt gekapselt haben, und verwenden Sie dann()

//引入封装Axios请求
import Axios from './request/axios';
 
const app = createApp(App).use(VueAxios, axios).use(ElementPlus).use(router).use(Axios)

4 . Verwenden Sie

in den erforderlichen Komponenten. Nach der Kapselung muss ich es letztendlich verwenden. Importieren Sie

getCurrentInstance in die Komponente. Fügen Sie den folgenden Code hinzu.

import {  getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

  function logout(){
    proxy.$post("/sysStaff/logout",{}).then((response)=>{
      console.log(response)
      if(response.code == 200){
        sessionStorage.clear();
        router.push('/')
        ElMessage({
          message: '退出成功',
          type: 'success',
        })
      }
    })
  }

Beim Aufruf gibt es zwei Parameter. Der erste Parameter ist der Pfad und der zweite Parameter ist ein Objekt, in das die zu sendenden Parameter geschrieben werden können, wie zum Beispiel: Benutzername: shuaibi, Passwort: 123456.

Ergänzung: Lösen Sie das domänenübergreifende CORS-Problem durch spezifische Konfiguration

Installieren Sie das Drittanbieterpaket webpack-dev-server

Wenn Sie es nicht tun Wenn Sie es nicht installieren, muss kein devServer-Konfigurationselement installiert werden Fordert eine Webseite mit einem Domänennamen an, muss jedoch die Ressourcen eines anderen Domänennamens abrufen. Solange einer der beiden Domänennamen, Ports oder Protokolle unterschiedlich ist, gilt dies als domänenübergreifend. Hier gibt es keine detaillierte Erklärung. Wenn Sie mehr wissen möchten, können Sie die Informationen überprüfen.

Das Konfigurationselement devServer kann einen Reverse-Proxy aktivieren, um domänenübergreifende Probleme zu lösen. Alle vorherigen Adressspleißvorgänge können abgerufen werden

/webPage/cooperater.post... Wenn die Anforderung schließlich initiiert wird und pathRewrite nicht geschrieben ist, bedeutet dies, dass nach /webPage gesucht und die Adresse im Ziel davor gespleißt wird. Die meisten werden eine Anfrage an http://127.0.0.1:23456/webPage/cooperater.post initiieren.

1. pathRewrite: {"^/webPage": "***",}, was darauf hinweist, dass das Routenumschreiben /webPage durch ***

   # ersetzen wird 🎜🎜#
   

Das obige ist der detaillierte Inhalt vonWie werden Axios-Anfragen in vue3 gekapselt und in Komponenten verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!