Vue axios 二次封装、调用真实接口

axios 二次封装、调用真实接口

1. 为什么要二次封装 axios

• 请求拦截器：可以在发送请求之前处理一些事情
• 响应拦截器：当服务器返回数据以后可以处理一些事情

封装

1. 创建 src/request/index.js 文件（请求网络数据）

• 写法一：

import axios from "axios";
// 1. 利用axios对象的方法create，去创建一个axios案例
// 2. requests就是axios
const requests = axios.create({
  // 配置对象
  baseURL: "/api", //基础路径，发送请求的时候，路径当中会出现api
  timeout: 5000,   //请求超时的时间5s
})

// 请求拦截器：在发送请求之前，请求拦截器可以检测到，在请求发送之前处理一些事情
requests.interceptors.request.use((config) => {
  // config: 是配置对象，该对象包含一个属性-->headers请求头
  return config
})
// 响应拦截器：
requests.interceptors.response.use((res) => {
  // 成功的回调函数
  return res.data
}, (error) => {
  // 失败的回调函数
  return Promise.reject(new Error('faile'))
})

// 对外暴露
export default requests;

---

• 写法二：
  • 再创建一个 src/request/config.js 文件

  export default {
    method: 'get',
    // 基础url前缀
    baseURL: '/api',
    // 请求头信息
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    },
    // 设置超时时间
    timeout: 10000,
    // 携带凭证
    withCredentials: true,
    // 返回数据类型
    responseType: 'json'
  }
  

  • 修改一下 index.js 文件中的内容

  const requests = axios.create({...config}) 
  # 等价于
   const requests = axios.create({
  // 配置对象
  baseURL: "/api", //基础路径，发送请求的时候，路径当中会出现api
  timeout: 5000,   //请求超时的时间5s
  })
  

2. 接口统一管理

• 在/src/api文件夹下，创建login.js文件，对请求接口进行统一管理：

// 当前文件是对API进行统一管理
import request from '@/request/index'
// 登录
export const login = (data) =>{
    return request({
        url:"Auth/Login",
        method:"post",
        data,
    })
}

跨域

1. 什么是跨域？

• 当前发起请求的域和该请求指向的资源所在的域不一致。具体表现在协议、域名、端口号——均一致为同域,有一个不同就是跨域

• 在根目录下，创建vue.config.js

server:{
    proxy:{
      '/api': {
        target:'http://127.0.0.1:5003/api',
        changeOrigin:true,
        rewrite: path => path.replace(/^\/api/, '')
       }
    }
  },

• vue.config.js 完整内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.NODE_ENV === "production" ? "/demo-site/" : "/",
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'vuex', 'vue-i18n'], // 自动导入vue 和 vue-router 等相关函数
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server:{
    proxy:{
      '/api': {
        target:'http://127.0.0.1:5003/api',
        changeOrigin:true,
        rewrite: path => path.replace(/^\/api/, '')
       }
    }
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    }
  }
})

• 这样下来，前端调用后台接口时候也不会出现跨域问题

  
  QQ截图20230318213018.png
  QQ截图20230318213132.png

QQ截图20230318213142.png