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 ../assets/webpost;
export default {

}

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

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

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

}

 

vue中引用js文件的方法

上一篇:Android TV开发总结(三)构建一个TV app的焦点控制及遇到的坑


下一篇:.NET Core3.1 Dotnetty实战第三章