vite+vue3项目中js方法调用
这这里一创建一个axios接口demo为例：
首先安装axios，打开官方GitHub：https://github.com/axios/axios
或者访问中文网站：https://www.axios-http.cn/docs/intro
1、在终端输入：
npm install axios
进行安装
2、安装成功后：
在vite项目的src目录下新建一个api文件夹
创建一个request.js,
import axios from 'axios'
const Api = axios.create({
baseURL:'接口地址'
});
//3. 请求拦截器 ==> 前端给后端发送数据[ 没有到后端 ]
//做的事情：headers给后端传递token
Api.interceptors.request.use(config => {
console.log( 1 );
return config;
}, error => {
Promise.reject(error);
});
//4.响应拦截器 ==> 后端给前端返回数据[ 前端到后端了 ]
Api.interceptors.response.use(
(response) => {
return response.data.data;
},
error => {
return Promise.reject(new Error(error.response.data))
}
)
export default Api;
然后我们创建一个方法工厂，在同一目录下面：factory.js
1、方法一
import Api from "./request"
const Factory = {
getMemberData:()=>{
return Api({
'url':'api/gerUserlist',
})
},
getOtherMsg:()=>{
return Api({
'url':'api/msg',
'method':'post'
})
}
}
export default Factory
调用方法：
import fac from '../../api/factory'
onMounted(()=>{
fac.getMemberData().then(function(res){
console.log(res.list);
//navList.value = res.list;
})
})
2、方法二
如果将当前Factory注入到全局变量中调用，在main.js 中添加：
import { createApp } from 'vue'
//import './style.css'
import App from './App.vue'
import router from './router'
import Factory from './api/factory'
const app = createApp(App)
app.config.globalProperties.$Factory = Factory;
app.use(router);
app.mount('#app')
在页面中调用：
注：页面中类似ref是import使用插件按需引入了。
const { proxy } = getCurrentInstance(); //通过 全局使用工具类 getCurrentInstance 方法解构出 proxy
let navList = ref([]);
onMounted(()=>{
proxy.$Factory.getMemberData().then(function(res){ //通过proxy中的方法调用
console.log(res.list);
navList.value = res.list;
})
})
3、方法三
factory.js文件
import Api from "./request"
export function getMemberData(){
return Api({
'url':'api/slider/getSliders',
})
}
export function getlist(){
return Api({
'url':'api/slider/getSliders',
})
}
页面调用：
import { getMemberData,getlist } from '../../api/factory' //引入factory文件，然后解构出两个方法
let navList = ref([]);
onMounted(()=>{
getlist().then(function(res){ //直接调用方法名
console.log(res.list);
navList.value = res.list;
})
})
