- 开发无止境 -
Data: 2021-04-29 17:10:58Form: JournalClick: 25
# 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);
})
}
}