• Welcome to Journal web site.

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Vue3 实战处理

Data: 2021-04-29 17:10:58Form: JournalClick: 1

# 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);
        })
    }
}
Name:
<提交>