首页 >web前端 >Vue.js >vuejs怎么调用js文件里面的方法

vuejs怎么调用js文件里面的方法

藏色散人
藏色散人原创
2021-09-25 15:37:3610044浏览

vuejs调用js文件里面的方法:1、在assets文件下新建一个js文件;2、通过“export default {...}”在需要使用方法的组件中引用即可。

vuejs怎么调用js文件里面的方法

本文操作环境:Windows7系统、Vue2.9.6版,DELL G3电脑

vuejs怎么调用js文件里面的方法?

vue中引用js文件的方法

在vue的很多组件中都会用到axios来Post数据,每个组件中都写上一个post的方法倒是也可以,复制就行了,但是总感觉有些不方便,那么可以把axios的post写到一个单独的js文件中,然后在需要的组件中引用岂不是更好吗。

1、在assets文件下新建一个js文件

新建一个名称为webpost.js文件

import axios from 'axios'
    //Post方法的封装
    function axiosPost(url,params){
        return new Promise((resolve, reject) => {
                axios({
                url: url,
                method: 'post',
                data: params,
                headers: {
                    'Content-Type':'application/json'
                }
            })
            .then(res=>{
                resolve(res.data);
            });
        });
    }
    export {
        axiosPost
    }

这个需要专门引用一下axios,也就是第一行,然后就可以使用了,最后一句很重要,不然你没法在别的组件中调用

2、在需要使用此方法的组件中引用

<script>
import {axiosPost} from &#39;../assets/webpost&#39;;
export default {
}

注意引用的路径,import {}中的内容就是上面export中的内容

使用的时候连this都不需要了,直接axiosPost就可以了

axiosPost(url,params)
.then(res=>{
if (res===401){
   this.$message.error(&#39;哦,对不起,你所输入的用户名或密码有误!&#39;);
}else{
}

 3、js的另一种写法

下面是重新编辑的部分,这几天又把axios部分整理了一下,加上了拦截器,用于向api请求时带上token验证,只多了一个export,可以写多个,结构更清晰,更容易理解。

import axios from &#39;axios&#39;
    //Post方法的封装
    export function axiosPost(url,params){
        return new Promise((resolve, reject) => {
                //以下部分是拦截器功能
                axios.interceptors.request.use(config=>{
                    const token=localStorage.getItem(&#39;token&#39;)
                    if(token){
                        config.headers.authorization=token
                    }
                    return config
                },err=>{
                })
                //下面是正常的           
                axios({
                    url: url,
                    method: &#39;post&#39;,
                    data: params,
                    headers: {
                        &#39;Content-Type&#39;:&#39;application/json&#39;
                    }
                })
                .then(res=>{
                    resolve(res.data);
                });
            });
    }

推荐:《最新的5个vue.js视频教程精选

 

以上是vuejs怎么调用js文件里面的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn