👏作者简介：大家好，我是小童，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 instanceA 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:"电脑"
}
]
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)