Vue3 实战处理

一、axios

# 1、安装axios
# 1.1、npm命令
npm i axios -S
# 1.2、yarm命令
yarn add axios


# 2、使用axios
<template>
    <div>
        <div>欧阳克</div>
    </div>
</template>
<script>
    # 2.1、引入axios
    import axios from "axios";
    export default {
        setup() {
            # 2.2、创建axios
            const instance = axios.create({
              baseURL: "http://admin.ouyangke.cn/index.php/api",
              timeout: 5000,
            })

            instance({
                method: "get", // 提交方式
                url: "/Index/prov_list",
                data: {}, // 提交数据
            }).then((res) => {
                console.log(res);
            }).catch((err) => {
                console.log(err);
            })
        }
    };
</script>

---

二、封装网络请求

# 1、创建/src/network目录
# 1.1、创建请求公用方法文件 /src/network/request.js文件

# 1.2、引入axios
import axios from "axios";
export function request(config) {
    # 1.3、创建axios
    const instance = axios.create({
        baseURL: "http://admin.ouyangke.cn/index.php/api",
        timeout: 5000,
    });
    //请求拦截
    instance.interceptors.request.use(
        (config) => {
            // 如果API需要认证， 在这统一设置
            return config;
        },
        (err) => {
            
        }
    );
    //响应拦截
    instance.interceptors.response.use(
        (res) => {
            return res.data ? res.data : res;
        },
        (err) => {
            // 如果没有授权， 去login
            // 如果有错误， 在这里可以提示
        }
    );
    return instance(config);
}


# 2、创建 /scr/network/home.js 文件
# 2.1、每个接口，创建一个方法
import { request } from "./request.js";
export function getHome() {
    return request({
        url: "/Index/prov_list",
    })
}


# 3、vue文件 访问home接口
import { getHome } from "../network/home.js";
export function getHome() {
    setup() {
        getHome().then(res=>{
            console.log(res);
        })
    }
}