Apakah kaedah merangkum permintaan Axios dalam vue3 dan menggunakannya dalam komponen?

1. Cipta folder untuk menyimpan js yang dibungkus

Saya menciptanya dalam src/request/axios.js

2 adalah seperti berikut

Salin kod berikut terus ke request.js, yang merangkumi permintaan get dan pos Apa yang anda perlu konfigurasikan sendiri ialah: alamat permintaan anda sendiri, sama ada tokenKey adalah token dan tukar. untuk menyimpannya secara tempatan, boleh melihat komen dalam kod, ia mudah difahami.

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

Dalam main.js, perkenalkan js yang kami enkapsulasi pada langkah pertama, dan kemudian gunakan()

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

4 komponen

Inilah maksudnya, ia dibungkus, akhirnya saya perlu menggunakannya. Import getCurrentInstance dalam komponen. Tambah kod berikut.

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

Apabila dipanggil, terdapat dua parameter Parameter pertama ialah laluan, dan parameter kedua ialah objek, di mana parameter yang akan dihantar boleh ditulis, seperti: nama pengguna: shuaibi. , kata laluan :123456.

Tambahan: Selesaikan masalah merentas domain CORS melalui konfigurasi tertentu

Pasang pakej pihak ketiga webpack-dev-server

Jika anda tidak memasangnya, terdapat tiada item konfigurasi devServer, anda mesti memasang

npm install webpack-dev-server

Tulis konfigurasi berikut dalam direktori akar 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": "",
        // },
      },
    },
  },
};

Jika penyemak imbas meminta halaman web dengan satu nama domain, tetapi perlu dapatkan sumber nama domain lain, selagi dua nama domain, port atau protokol ini Jika mana-mana satu daripadanya berbeza, ia dianggap sebagai domain silang. Tiada penjelasan terperinci di sini Jika anda ingin mengetahui lebih lanjut, anda boleh menyemak maklumat tersebut.

1. Item konfigurasi devServer boleh mendayakan proksi terbalik untuk menyelesaikan masalah merentas domain. Semua penyambungan alamat sebelumnya boleh mendapatkan
   /webPage/cooperater.post... Apabila permintaan akhirnya dimulakan, jika pathRewrite tidak ditulis, ini bermakna mencari /webPage dan menyambungkan alamat dalam sasaran sebelum itu. Kebanyakan akan memulakan permintaan ke http://127.0.0.1:23456/webPage/cooperater.post.

2. pathRewrite: {"^/webPage": "***",}, menunjukkan bahawa penulisan semula laluan akan menggantikan /webPage dengan ***

Atas ialah kandungan terperinci Apakah kaedah merangkum permintaan Axios dalam vue3 dan menggunakannya dalam komponen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!