Encapsulating Axios in Vue

In the previous project, the request api and the request method are encapsulated. This encapsulation is for simplicity, better management of the interface provided by the backend, reusability of the request code, and simple code change.

Install axios

   $ npm install axios

Create directory file

Create http directory in src

In http Create an http.js user in the directory and request the method

Create api.js in the http directory to store the back-end provided interface

Create axios.js user in the http directory to do axios interception Device

Create vue.config.js in the root directory User request proxy configuration

The following is the code

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

You can create a file api under project/scr/http/ and then create an interface file according to the project module to facilitate management

Project/scr/http/api.js code

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

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

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

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

The above is ready. Then the next step is to add the code in project/scr/min.js

The code in 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>

The next step is to add the proxy configuration

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': ''
        }
      }
    }
  }
}

Recommended tutorials: "PHP Tutorial" "JS Tutorial"

The above is the detailed content of Encapsulating Axios in Vue. For more information, please follow other related articles on the PHP Chinese website!