Encapsuler Axios dans Vue

Dans le projet précédent, l'API de requête et la méthode de requête sont encapsulées pour plus de simplicité, une meilleure gestion de l'interface fournie par le backend, la réutilisabilité du code de requête et. simple changement de code.

Installer axios

   $ npm install axios

Créer un fichier répertoire

Créer un répertoire http dans src

Dans http Créer un utilisateur http.js dans le répertoire et demandez la méthode

Créez api.js dans le répertoire http pour stocker l'interface back-end fournie

Créez un utilisateur axios.js dans le répertoire http pour faire un appareil d'interception axios

Créez vue.config.js dans le répertoire racine. Configuration du proxy de la demande de l'utilisateur

L'étape suivante est le code

Code dans project/scr/http. /http.js

import axios from 'axios';
export default {
    /**
     * get 请求
     * @param url 接口路由
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise<any>}
     */
    get(url, auth = false) {
        if (auth) {
            return axios.get(url, {headers: {Authorization: &#39;Your back-end user authenticates information&#39;}});
        } else {
            return axios.get(url);
        }
    },
    /**
     * post 请求
     *
     * @param url 接口路由
     * @param data 接口参数
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise<any>}
     */
    post(url, data, auth = false) {
        if (auth) {
            return axios.post(url, data, {headers: {Authorization: &#39;Your back-end user authenticates information&#39;}});
        } else {
            return axios.post(url, data);
        }
    },
    /**
     * put请求
     * @param url 接口路由
     * @param data 接口参数
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise<any>}
     */
    put(url, data, auth = false) {
        if (auth) {
            return axios.put(url, data, {headers: {Authorization: &#39;Your back-end user authenticates information&#39;}});
        } else {
            return axios.put(url, data);
        }
    },
    /**
     * 删除
     * @param url 接口路由
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise}
     */
    del(url, auth = false) {
        if (auth) {
            return axios.delete(url, {headers: {Authorization: &#39;Your back-end user authenticates information&#39;}});
        } else {
            return axios.delete(url);
        }
    },
    /**
     * 上传文件
     * @param url 接口路由
     * @param file 接口文件
     * @param auth 是否需要带登录信息
     */
    uploader(url, file, auth = false) {
        let param = new FormData();
        param.append(&#39;file&#39;, file)
        if (auth) {
            return axios.post(url, param, {headers: {Authorization: &#39;Your back-end user authenticates information&#39;}})
        } else {
            return axios.post(url, param)
        }
    },
}

Vous pouvez créer un fichier api sous project/scr/http/ puis créer un fichier d'interface selon le module projet pour faciliter la gestion

Project/scr/http/ Code api.js

import Goods from './api/goods.js';
export default {
    // 首页
    Index: {
        index: '/index/index'
    },
    // 个人中心
    Home: {
        UserInfo: '/user/info'
    },
    // 当然也可以用文件方式进行管理
    Goods: Goods
}

Code dans project/scr/http/api/goods.js

export default {
    GoodsShow: '/goods/default'
}

Code dans project/scr/http/axios.js

import axios from 'axios';
// 请求拦截
axios.interceptors.request.use(config => {
    // 1. 这个位置就请求前最后的配置
  // 2. 当然你也可以在这个位置 加入你的后端需要的用户授权信息
  return config
}, error => {
    return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(response => {
  // 请求成功
  // 1. 根据自己项目需求定制自己的拦截
  // 2. 然后返回数据
  return response;
}, error => {
    // 请求失败
      if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    // 对400错误您的处理\
                break
                case 401:
                    // 对 401 错误进行处理
                break
                default:
                // 如果以上都不是的处理
                return Promise.reject(error);
          }
    }
})

Le ci-dessus est prêt. Ensuite, l'étape suivante consiste à ajouter le code dans project/scr/min.js

Le code dans project/scr/min.js

import Vue from 'vue';
import App from './App.vue';
import api from './http/api';
import http from './http/http';
// axios 拦截器
import './http/axios'
// 对后端接口 进行全局注册
Vue.prototype.$api = api;
// 对请求方式 进行全局注册
Vue.prototype.$http = http;
那么接下来就是使用了
项目 /src/views/index/index.vue 中我们对他进行使用
<template>
     <div>
     </div>
 </template>
<script>
  export default {
        name: "Index",
        mounted() {
            this.handle()
        },
        methods: {
            handle(){
                // 当然如果你需要带登录信息去请求这个接口 可以在 路由后面跟上 true 或者 false 来决定是否在请求的时候带登录信息
                // 我们这样进行封装 就对一个 请求封装好了。
               this.$http.get(this.$api.Index.index,true).then((result) => {
               })
            }
        }
    }
</script>
<style scoped>
</style>

L'étape suivante consiste à ajouter la configuration du proxy

project/vue .config.js code

// 后端请求地址 注意[他会根据你环境的不同从而获取的 env 文件不同]
const target = process.env.APP_API_URL;
module.exports = {
  devServer: {
    // 所有的接口请求代理
  proxy: {
      '/api': {
        target: target,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
              '^api': ''
        }
      }
    }
  }
}

Tutoriels recommandés : "Tutoriel PHP" "Tutoriel JS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!