Quelle est la méthode pour encapsuler les requêtes Axios dans vue3 et les utiliser dans les composants ?

1. Créez un dossier pour stocker les js packagés

Je l'ai créé dans src/request/axios.js

# 🎜🎜#2. Le code d'encapsulation est le suivant

Copiez le code suivant directement dans request.js, en encapsulant les requêtes get et post

Ce que vous devez configurer vous-même est : votre propre requête. adresse, tokenKey Qu'il s'agisse d'un token, remplacez-le par le nom du token que vous enregistrez localement Vous pouvez regarder les commentaires dans le code, c'est facile à comprendre.

/**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. Configuration

Dans main.js, introduisez le js que nous avons encapsulé dans la première étape, puis utilisez()

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

4 . Utilisez

dans les composants requis. Voici le point après l'encapsulation, je dois l'utiliser en dernière analyse. Importez

getCurrentInstance dans le composant. Ajoutez le code suivant.

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',
        })
      }
    })
  }

Lors de l'appel, il y a deux paramètres. Le premier paramètre est le chemin, et le deuxième paramètre est un objet, dans lequel les paramètres à envoyer peuvent être écrits, tels que : nom d'utilisateur : shuaibi, mot de passe : 123456.

Supplément : résolvez le problème inter-domaines CORS grâce à une configuration spécifique

Installez le package tiers webpack-dev-server

Si vous ne le faites pas Ne l'installez pas, il n'y aura aucun élément de configuration devServer. Doit être installé

npm install webpack-dev-server

Écrivez la configuration suivante dans le répertoire racine vue.config.js

module.exports = {
  // 关闭语法检查
  lintOnSave: false,
  // 解决axios发送请求时的跨域问题,不做配置会报错如下↓↓↓↓
  // ccess to XMLHttpRequest at 'http://127.0.0.1:23456/webPage/home_notice.post' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  devServer: {
    // https: false,
    proxy: {
      //  /api 表示拦截以/api开头的请求路径
      "/webPage": {
        target: "http://127.0.0.1:23456/", // 跨域的域名（不需要重写路径）
        ws: false, // 是否开启websockede
        changeOrigin: true, // 是否开启跨域
        // pathRewrite: {
        //   "^/webPage": "",
        // },
      },
    },
  },
};

Si le navigateur demande une page Web d'un nom de domaine, mais doit obtenir les ressources d'un autre nom de domaine, tant que l'un des deux noms de domaine, ports ou protocoles est différent, cela est considéré comme inter-domaine. Il n'y a pas d'explication détaillée ici. Si vous souhaitez en savoir plus, vous pouvez vérifier les informations.

1. L'élément de configuration devServer peut activer un proxy inverse pour résoudre les problèmes inter-domaines. Tous les épissages d'adresses précédents peuvent être obtenus

   /webPage/cooperater.post... Lorsque la demande est finalement lancée, si pathRewrite n'est pas écrit, cela signifie rechercher /webPage et épisser l'adresse dans la cible qui le précède. La plupart lanceront une demande à http://127.0.0.1:23456/webPage/cooperater.post.
   

2. pathRewrite : {"^/webPage": "***",}, indiquant que la réécriture de route remplacera /webPage par ***

   # 🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!