vite+vue3项目中js方法调用

hykeda3年前Vue1692

这这里一创建一个axios接口demo为例:

首先安装axios,打开官方GitHub:https://github.com/axios/axios

或者访问中文网站:https://www.axios-http.cn/docs/intro

1、在终端输入:

Bash
 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;
    })

})


阅读剩余的64%

相关文章

vue项目上安装SCSS

原文:https://blog.csdn.net/zhouzuoluo/article/details/81010331  ① 使用vue-cli模板创建新项目:vu...

vite.config.js配置@

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path f...

学习lodash

官网:https://www.lodashjs.com/ 链接:https://www.jianshu.com/p/d46abfa4ddc9 简介 L...

useRoute,userRouter的用法

 import { useRoute, useRouter } from 'vue-router'; 这里的useRoute是获取传递的变量:const route...

在html5中使用Vue3,并且使用组件形式

有的时候为了使用vue编写一些前端程序,如果直接搭建框架感觉太过庞大了。如何直接在html中使用呢?接下来详细介绍:1)引入Vue,并创建Vue实例在官网上,已经讲得很清楚了,我们可以这样使用&nbs...

页面直接使用ElementUI,官方提供的表格代码,样式错乱

页面直接使用ElementUI,官方提供的表格代码,样式错乱

在使用element编写前端代码是,引入element的css和js,使用官方提供的例子:<template>   <el-table :data=&...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。