11、Vue-组合式-网络请求-axios

点击前往官网

前置步骤

正式开始前需要手动创建一个fastApi服务用于测试网络请求，参考下述文章进行环境配置和启动：

fastApi第一个程序

直接赋值这里的fastApi代码：

from fastapi import FastAPI
from pydantic import BaseModel
# 导入跨域处理模块
from fastapi.middleware.cors import CORSMiddleware


app = FastAPI()

# 这里配置支持跨域访问的前端地址
origins = [
    "http://127.0.0.1:5173",    # 不带端口的
]
# 将配置挂在到app上
app.add_middleware(
    CORSMiddleware,
    # 这里配置允许跨域访问的前端地址
    allow_origins=origins,
    # 跨域请求是否支持 cookie， 如果这里配置true，则allow_origins不能配置*
    allow_credentials=True,
    # 支持跨域的请求类型，可以单独配置get、post等，也可以直接使用通配符*表示支持所有
    allow_methods=["*"],
    allow_headers=["*"],
)


# 定义了一个get请求
@app.get("/")
def root():
    return {"message": "Hello fastApi"}


# 定义了一个post请求体
class UserInfo(BaseModel):
    name: str


# 定义了一个需要传参的post请求
@app.post("/name")
def get_name(userInfo: UserInfo):
    return userInfo

上述的代码中配置了一个get请求的返回和一个post请求的返回

一、安装

网络请求作为一个插件存在，所以需要额外进行安装

在项目目录下执行下述命令完成安装：

npm install --save axios

二、引用

1、组件引用

在组件中引用的话，就只能在单个组件中进行调用

在单个组件中使用下述引用语句

import axios from "axios";

2、全局引用

通过在main.js中设置进行全局引用，用的是之前依赖注入的方式

main.js内容如下：

import {createApp, ref} from 'vue'
import App from './App.vue'
// 导入网络请求库
import axios from "axios";
const app = createApp(App)
// 依赖注入
app.provide('axios', axios)
app.mount('#app')

app.vue接收如下：

const axios = inject('axios')

三、发送请求

1、get请求

下述以组件引用的方式发送一个get请求，替换app.vue代码如下：

<script setup>
// 使用组件引用
import axios from "axios";
import {onMounted, ref} from "vue";
const msg = ref('')

// 在生命周期函数中定义了一个网络请求
onMounted(()=>{
    axios({
        method: "get",
        url: "http://127.0.0.1:8000"    // 请求的是fastApi创建的服务地址
    }).then(
        res => {
            msg.value = res.data
        }
    )
})
</script>
<template>
    <p>网络请求结果: {{msg}}</p>
</template>

请求结果：

2、post请求

下述以全局引用的方式发送一个带有请求体的post请求，替换app.vue代码如下:

<script setup>

import {inject, onMounted, ref} from "vue";

const msg = ref('')
const axios = inject('axios')
// 在生命周期函数中定义了一个网络请求
onMounted(()=>{
    axios({
        method: "post",
        url: "http://127.0.0.1:8000/name",
        data: {name: "张三"}
    }).then(
        res => {
            msg.value = res.data
        }
    )
})
</script>
<template>
    <p>网络请求结果: {{msg}}</p>
</template>

请求结果：

更多请求类型参考官网

3、请求发送的快捷方式

下述的示例代码使用全局引用的方式分别发送get和post请求。旨在说明快捷发送请求的方式：

<script setup>

import {inject, onMounted, ref} from "vue";
const msg1 = ref('')
const msg2 = ref('')
const axios = inject('axios')
// 在生命周期函数中定义了一个网络请求
onMounted(()=>{
    // 发送一个get请求
    axios.get("http://127.0.0.1:8000").then(
        res => {
            msg1.value = res.data
        }
    )
    // 发送一个带参数的post请求
    axios.post("http://127.0.0.1:8000/name", {name: "张三"}).then(
        res => {
            msg2.value = res.data
        }
    )

})
</script>
<template>
    <p>网络请求结果: {{msg1}}</p>
    <p>网络请求结果: {{msg2}}</p>
</template>

四、封装网络请求

封装的目：

• 让网络请求的管理更加统一
• 让网络请求的调用变得更加方便

1、在项目的src目录下新建一个https的目录, 用于统一管理网络请求相关的文件

2、https目录下新建一个名为http.js的文件，用于定义网络请求发送前，响应后的一些特殊操作

import axios from "axios";

// 这里放网络请求的公共配置
const axiosInstance = axios.create({
        timeout:5000
})


// 发送数据之前的处理
axiosInstance.interceptors.request.use(
        // 如果成功了
        config =>{
            // 可以使用【config.】获取请求参数并进行对应处理
            if(config.method === "post"){
                config.data = config.data
            }
            // config 包含了网络请求的所有信息
            return config
        // 如果失败了
        },
        error =>{
            // 返回失败信息
            return Promise.reject(error)
        }
)

// 接收数据前的处理
axiosInstance.interceptors.response.use(
        // 如果成功了
        response =>{
            // 如果返回状态码是200表示成功，否则返回失败
            return response.status === 200 ? Promise.resolve(response): Promise.reject(response)
        },
        // 如果失败了
        error => {
            // 如果整个网络请求过程中就出问题了
            const { response } = error;
            // 调用定义的不同错误码处理的函数
            errorHandle(response.status, response.info)
        }
)

// 不同错误码的处理
const  errorHandle = (status, info) => {
    switch(status){
        case 400:
            console.log("语义错误");
            break;
        case 401:
            console.log("服务器认证失败");
            break;
        case 500:
            console.log("地址错误");
            break;
        case 502:
            console.log("服务器遇到意外");
            break;
        default:
            console.log("服务器无响应");
            break;
    }
}

export default axiosInstance;

3、新建一个paths.js用于统一管理网络请求路径

// 所有地址都放这里进行存储
const base = {
    // 设置一个基础地址 后续地址进行可以在基础地址上进行拼接
    baseUrl: "http://127.0.0.1:8000",
    postUrl: "/name"
}

export default base;

4、新建一个index.js用于封装不同类型的网络请求

// 导入刚刚创建的两个文件
import axios from "./http"
import paths from "./paths"

// 这里定义API
const api = {
    // 定义一个get请求Api
    getRequest(){
        return axios.get(paths.baseUrl)
    },
    // 定义一个post请求Api
    postRequest(data){
        return axios.post(paths.baseUrl+paths.postUrl, data)
    }
}

export default api

可以看出，我demo中的get请求和post请求都进行了封装。

5、在app.vue中使用封装好的网络请求

<script setup>
import {onMounted, ref} from "vue";
// 导入封装的Api
import api from "./https/index"


const msg1 = ref('')
const msg2 = ref('')

onMounted(()=>{
    // 使用封装好的get请求
    api.getRequest().then(
        res => {
            msg1.value = res.data
        }
    )
    // 使用封装好的post请求
    api.postRequest({name: "张三"}).then(
        res => {
            msg2.value = res.data
        }
    )
})
</script>
<template>
    <p>网络请求结果: {{msg1}}</p>
    <p>网络请求结果: {{msg2}}</p>
</template>

最终的结果跟的demo中是一致的

五、网络请求跨域处理

一般性放到后端去处理, 但是前端Vue也是可以处理的

开始前先修改下fastApi中的代码, 去掉后端跨域处理的部分。修改后代码：

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()


# 定义了一个get请求
@app.get("/")
def root():
    return {"message": "Hello fastApi"}


# 定义了一个post请求体
class UserInfo(BaseModel):
    name: str


# 定义了一个需要传参的post请求
@app.post("/name")
def get_name(userInfo: UserInfo):
    return userInfo

代码修改好之后此时浏览器访问前端界面显示应该是如下图这样的：