vue3+axios封裝攔截器方式

更新時間：2024年09月18日 09:54:43 作者：jnfy

介紹了如何在Vue項目中使用Axios封裝請求、配置攔截器,并在api.js中統(tǒng)一管理API接口,同時,也講解了如何在vite.config.js中配置解決跨域問題,這些操作可以優(yōu)化前端代碼結構,提高開發(fā)效率

安裝axios

 yarn add axios
 npm install axios

封裝請求配置攔截器

在src/api/axios.js中封裝我們的請求。

import axios from "axios";
import {useCommonStore} from "../store/module/common.js";
import {storeToRefs} from "pinia";

// 設置接口超時時間
axios.defaults.timeout = 60000;
// 請求地址
axios.defaults.baseURL = '';

// http request 攔截器
axios.interceptors.request.use(
    config =>{
        // 獲取token
        const  commonStore = useCommonStore()
        const { token } = storeToRefs( commonStore )
        console.log('token',token.value)
        // 配置請求頭
        config.headers = {
            // 'Content-Type':'application/x-www-form-urlencoded',   // 傳參方式表單
            'Content-Type': 'application/json;charset=UTF-8', // 傳參方式json
            'Authorization': `Bearer ${token.value}`, // 設置Authorization
            // 'token': token.value // 或者設置token

        };
        return config;
    },
    error => {
        return Promise.reject(error);
    }
)

// http response 攔截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        const { response } = error;
        if (response) {
            // 判斷錯誤狀態(tài)碼
            if (response.status === 400) {
                // 請求400
            } else if (response.status === 401) {
                // 未授權，請重新登錄
            } else if (response.status === 403) {
                // 拒絕訪問(403)
            }
            return Promise.reject(response.data);
        } else {
            console.log('網絡連接異常,請稍后再試!')
        }
    }
)

// 封裝 get post 請求
export function request (url,params = {},type = 'POST') {
    return new Promise((resolve,reject) => {
        let promise
        if (type.toUpperCase() === 'GET') {
            promise = axios({url,params})
        } else if (type.toUpperCase() === 'POST') {
            promise = axios({
                method: 'POST',
                url,
                data: params
            })
        }

        promise.then( res => {
            resolve(res)
        }).catch (err => {
            reject(err)
        })
    })
}

api統(tǒng)一管理

在src/api/api.js文件中統(tǒng)一管理我們的接口api

// 引入 request
import { request } from "./axios.js"

// 模塊化接口
export class UserApi {
    static async login(params) {
        return request('/login',params,'post')
    }
    static async register(params) {
        return request('/register',params,'post')
    }
    static async getUserInfo(params) {
        return request('/userInfo',params,'get')
    }
}

export class BookApi {
    static async getBookList(params) {
        return request('/bookList',params,'get')
    }
}

應用

<script setup>
import {UserApi} from "../api/api.js";
const login = async () => {
  const params = {
    username: 'admin',
    password: '123456',
  }
  const res = await UserApi.login(params)
}
</script>

跨域問題

在vite.config.js配置。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '127.0.0.1',
    port: 3000,
    proxy: {
      '/api': {
        target: '', // 實際請求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
}