快捷導(dǎo)航

vue3+ts封裝axios實(shí)例以及解決跨域問題

更新時間：2024年09月18日 10:01:23 作者：韭菜蓋飯

在前端開發(fā)中,使用axios進(jìn)行數(shù)據(jù)請求是常見的做法,封裝axios可以統(tǒng)一請求頭處理、方便接口管理、配置多攔截器等,提高代碼的可維護(hù)性和重用性,本文詳細(xì)記錄了axios的封裝過程,包括安裝、配置跨域處理、接口管理文件的創(chuàng)建等

一、前言

前端請求后端數(shù)據(jù)時，會用到axios，但是如果不將axios封裝好，會導(dǎo)致代碼冗余

二次封裝的好處如下：

求頭能統(tǒng)一處理
便于接口的統(tǒng)一管理
解決回調(diào)地獄
配置攔截器，給不同的實(shí)例配置不同的攔截器，支持以對象形式接受多個攔截器配置

因此，在這里記錄一下axios的封裝過程。

二、封裝axios

安裝axios

npm install axios

在目錄/src/utils下創(chuàng)建一個http的文件夾

request.ts文件內(nèi)容如下：

import axios from 'axios';

// 創(chuàng)建 axios 實(shí)例
const instance = axios.create({
  baseURL: 'http://127.0.0.1:4008/api/', // API 基礎(chǔ)路徑
  timeout: 100000, // 請求超時時間
  headers:{
	'Content-Type': 'application/json;charset=UTF-8',
  }
});

// 請求攔截器
instance.interceptors.request.use(
  config => {
    // 在發(fā)送請求之前做些什么，例如添加token
    // config.headers['Authorization'] = 'Bearer your-token';
    return config;
  },
  error => {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

// 響應(yīng)攔截器
instance.interceptors.response.use(
  response => {
    // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
    return response;
  },
  error => {
    // 對響應(yīng)錯誤做點(diǎn)什么
    return Promise.reject(error);
  }
);

export default instance;

api.ts文件如下：

import http from './request'

export const generateVoice = (params:any) => {
  return http.request({
    method: 'POST',
    url: '/generate_voice',
    headers: {
        'Content-Type': 'application/json'
      },
    data:JSON.stringify(params)
  })
}

api.ts文件的目的是為了方便管理接口，你可以把所有接口卸載這里，這樣就會在后面調(diào)用時更加簡潔

三、解決跨域

在vite.config.ts文件中添加如下配置

  server: {
    port: 4008,
    host: '0.0.0.0',
    proxy: {
      "/api": {
        target: "http://64.176.215.21:8000/",
        changeOrigin: false,
        ws: true,
        rewrite:(path) => path.replace(/^\/api/, "")
      }
    },
  },

注意配置以上文件，你的接口就需要每次帶上/api前綴

在request.ts文件中，我們已經(jīng)做好了每次帶上/api前綴的代碼

 baseURL: 'http://127.0.0.1:4008/api/', // API 基礎(chǔ)路徑
 //or
 baseURL: '/api/', // API 基礎(chǔ)路徑

四、調(diào)用接口

沒有使用api.ts的接口

axios.post('/generate_voice',param)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.error(error);
      });

使用api.ts封裝好的接口

import {generateVoice} from '@/utils/http/api';

generateVoice(param)
  .then(response => {
    console.log("Voice generated successfully:", response.data);
  })
  .catch(error => {
    console.error("Error generating voice:", error);
  });