Comment appeler des méthodes dans des fichiers js dans vuejs-Voir.js-php.cn

Comment appeler des méthodes dans des fichiers js dans vuejs

藏色散人

Libérer： 2023-01-13 00:45:41

original

10001 Les gens l'ont consulté

vuejs appelle la méthode dans le fichier js : 1. Créez un nouveau fichier js sous le fichier d'actifs ; 2. Utilisez "export default {...}" pour le référencer dans le composant qui doit utiliser la méthode.

Comment appeler des méthodes dans des fichiers js dans vuejs

L'environnement d'exploitation de cet article : système Windows 7, Vue version 2.9.6, ordinateur DELL G3

Comment vuejs appelle-t-il la méthode dans le fichier js ?

Comment référencer des fichiers js dans vue

Dans de nombreux composants de vue, axios est utilisé pour publier des données. Il est normal d'écrire une méthode de publication dans chaque composant, mais cela donne toujours l'impression que c'est un. peu pratique, il ne serait donc pas préférable d'écrire la publication axios dans un fichier js séparé, puis de le référencer dans les composants requis.

1. Créez un nouveau fichier js sous le fichier d'actifs

Créez un nouveau fichier nommé webpost.js

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

Copier après la connexion

Cela doit citer spécifiquement axios, qui est la première ligne, et vous pouvez ensuite l'utiliser. très important, sinon vous ne pouvez pas l'appeler dans d'autres composants

2. Référencez-le dans le composant qui doit utiliser cette méthode

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

Copier après la connexion

Faites attention au chemin de la référence. Le contenu de l'import {} est le contenu de l'export. ci-dessus

Lors de son utilisation, même cela Pas besoin, juste axiosPost

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

Copier après la connexion

3. Une autre façon d'écrire js

Ce qui suit est la partie rééditée Au cours des derniers jours, j'ai trié la partie axios et ajoutée. un intercepteur pour envoyer des messages à l'API Apportez une vérification du jeton lors de la demande, il n'y a qu'une seule exportation de plus, vous pouvez en écrire plusieurs, la structure est plus claire et plus facile à comprendre.

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

Copier après la connexion