Vue에서 Axios 캡슐화

이전 프로젝트에서는 요청 API와 요청 방법이 캡슐화되었습니다. 이 캡슐화는 백엔드에서 제공하는 인터페이스의 더 나은 관리, 요청 코드의 재사용성 및 코드 단순화를 위한 것입니다.

axios 설치

   $ npm install axios

디렉토리 파일 생성

src에 http 디렉토리 생성

http 디렉토리에 http.js 생성 사용자 요청 방식

저장용 http 디렉토리에 api.js 생성 백엔드에서 인터페이스 제공

http 디렉토리에 axios.js를 만듭니다. 사용자는 루트 디렉토리에 vue.config.js를 만듭니다.

다음 단계는 코드

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

project/scr/http/ 아래에 api 파일을 생성한 후, 프로젝트 모듈을 기반으로 인터페이스 파일을 생성하면 관리가 쉽습니다

Project/scr/http/api.js code

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

Project/scr /http/api/goods.js

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

의 코드 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);
          }
    }
})

의 코드 위와 같이 준비되었습니다. 그런 다음 다음 단계는 project/scr/min.js에 코드를 추가하는 것입니다

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>

다음 단계는 프록시 구성

Project/vue.config.js 코드

입니다.

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

추천 튜토리얼: "

PHP 튜토리얼

》 《JS 튜토리얼》

위 내용은 Vue에서 Axios 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!