Vue3【Axios封装、Axios跨域配置、创建服务器提供数据】(九)-全面详解（学习总结---从入门到深化）

👏作者简介：大家好，我是小童，Java开发工程师，CSDN博客博主，Java领域新星创作者
📕系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶
📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦
🍂博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人

Axios封装

Axios跨域配置

创建服务器提供数据

Axios封装

封装 axios 之后，在使用上会更优雅，我们知道面向对象编程（OOP）遵循，低耦合高内聚。我们把网络请求放在一起更利于后期维护

import axios from "axios"
import qs from "querystring"
/**
 * 处理错误信息
 * status:状态吗
 * info:具体信息
 */
const errorHandle = (status,info) =>{
    switch(status){
        case 400:
            console.log("语义错误");
            break;
        case 401:
            console.log("服务器认证失败");
            break;
        case 403:
            console.log("服务器请求拒绝执行");
            break;
        case 404:
            console.log("请检查网路请求地址");
         break;
        case 500:
            console.log("服务器发生意外");
            break;
        case 502:
            console.log("服务器无响应");
            break;
        default:
            console.log(info);
            break;
   }
}
/**
 * 创建Axios对象
 */
const instance = axios.create({
    baseURL:"http://iwenwiki.com",
    timeout:5000
})
/**
 * 拦截器
 */
instance.interceptors.request.use(
    config =>{
        if(config.method === 'post'){
            config.data = qs.stringify(config.data)
       }
        return config
   },
    error => Promise.reject(error)
)
instance.interceptors.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    error =>{
        const { response } = error;
        if(response){
           errorHandle(response.status,response.info)
       }else{
            console.log("网络请求被中断了");
       }
   }
)
export default instance

import axios from "../utils/request"
const baseUrl = {
  banner:"/api/blueberrypai/getIndexBanner.php"
}
const api = {
    getBanner(){
        return axios.get(baseUrl.banner)
   }
}
export default api

<template>
    <h3>网络请求</h3>
    <ul>
      <li v-for="item in fingerUnion.data" :key="item">
            <h3>{{ item.title }}</h3>
            <p>{{ item.content }}</p>
        </li>
    </ul>
</template>
<script setup>
  import { onMounted,reactive } from "vue"
  import api from "../../api"
  const fingerUnion = reactive({
      data:{}
})
onMounted(() =>{
    api.getBanner().then(res =>{
        fingerUnion.data = res.data.banner
   })
})
</script>

实时效果反馈

1.下列代码，画横线处应该填写的代码是：

import axios from "axios"
import qs from "querystring"
/**
 * 处理错误信息
 * status:状态吗
 * info:具体信息
 */
const errorHandle = (status,info) =>{
   switch(status){
        case 400:
            console.log("语义错误");
            break;
        case 401:
            console.log("服务器认证失败");
            break;
        case 403:
            console.log("服务器请求拒绝执行");
            break;
        case 404:
            console.log("请检查网路请求地址");
            break;
        case 500:
            console.log("服务器发生意外");
            break;
        case 502:
            console.log("服务器无响应");
            break;
        default:
            console.log(info);
            break;
   }
}
/**
 * 创建Axios对象
 */
const instance = axios.create({
    baseURL:"http://iwenwiki.com",
    timeout:5000
})
/**
* 拦截器
 */
instance.___.request.use(
    config =>{
        if(config.method === 'post'){
            config.data = qs.stringify(config.data)
       }
        return config
   },
    error => Promise.reject(error)
)
instance.___.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    error =>{
        const { response } = error;
        if(response){
           errorHandle(response.status,response.info)
       }else{
            console.log("网络请求被中断了");
       }
   }
)
export default instance

A axios

B response

C instance

D interceptors

Axios跨域配置

在工作的真实场景中，跨域是常见问题，所以我们需要解决跨域问题

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
   resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
   }
 },
  server: {
    proxy: {
      '^/api': {
        target: 'http://iwenwiki.com', // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api/, '')
     }
   }
 }
})

<template>
    <h3>网络请求</h3>
    <ul>
        <li v-for="item in list.info" :key="item.id">
            <p>{{ item.title }}</p>
        </li>
    </ul>
</template>
<script setup>
  import { onMounted,reactive } from "vue"
  import axios from "axios"
  const list = reactive({
     info:[]
})
onMounted(() =>{
   axios.get("/api/api/FingerUnion/list.php")
   .then(res =>{
        list.info = res.data.data
   })
   .catch(error =>{
        console.log(error);
   })
})
</script>

实时效果反馈

1.下列代码，画横线处应该填写的代码是：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
   }
 },
  server: {
    proxy: {
      '^/api': {
        ___: 'http://iwenwiki.com', // 后端服务实际地址
        changeOrigin: true, //开启代理
        rewrite: (path) => path.replace(/^\/api/, '')
     }
   }
 }
})

A axios

B target

C instance

D interceptors

创建服务器提供数据

在真实开发场景中，很多项目是前后端同时开发，那么前端就不会第一时间拿到接口数据，但是为了前端开发期间的测试，我们还是需要自己创建服务器的

const express = require("express");
const app = express();
const router = require("./router");
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({
    extended:true
}))
app.use("/api",router);
app.listen(3000,() =>{
    console.log("server running at port 3000");
})

const express = require("express");
const router = express.Router();
const url = require("url");
const list = require("./data/list")
router.get("/list",(req,res) =>{
    const page = url.parse(req.url,true).query.page;
    res.send({
        status:200,
        result:list,
        page
   })
})
router.post("/login",(req,res) =>{
    const username = req.body.username;
    const password = req.body.password;
    res.send({
        status:200,
        username,
        password
   })
})
module.exports = router;

module.exports = [
   {
        id:1001,
        name:"衣服"
   },
   {
        id:1002,
        name:"鞋子"
  },
   {
        id:1003,
        name:"电脑"
   }
]

标签 OS, 数据, 服务器

Vue3【Axios封装、Axios跨域配置 、创建服务器提供数据 】(九)-全面详解（学习总结---从入门到深化）

Axios封装

Axios跨域配置

创建服务器提供数据

Vue3【Axios封装、Axios跨域配置、创建服务器提供数据】(九)-全面详解（学习总结---从入门到深化）