vue-cli 3.0 + 對 axios 封裝

程式設計師的貓發表於2019-07-25
VueiOS封裝

在前端專案中，請求 api 以及請求方式進行封裝，該封裝為了簡單，更加好的管理後端所給的介面，請求程式碼的複用性，程式碼簡單化。

安裝 axios

   $ npm install axios

建立目錄檔案

  1. 在 src 中建立 http 目錄
  2. 在 http 目錄中建立 http.js 使用者所以請求的方式
  3. 在 http 目錄中建立 api.js 用於存放後端提供介面
  4. 在 http 目錄中建立 axios.js 使用者做 axios 攔截器
  5. 在根目錄下面 建立 vue.config.js 使用者 請求代理配置

接下里就是程式碼

專案 /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: 'Your back-end user authenticates information'}});
        } 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: 'Your back-end user authenticates information'}});
        } 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: 'Your back-end user authenticates information'}});
        } else {
            return axios.put(url, data);
        }
    },

    /**
     * 刪除
     * @param url 介面路由
     * @param auth 是否需要帶登入資訊
     * @returns {AxiosPromise}
     */
    del(url, auth = false) {
        if (auth) {
            return axios.delete(url, {headers: {Authorization: 'Your back-end user authenticates information'}});
        } else {
            return axios.delete(url);
        }
    },

    /**
     * 上傳檔案
     * @param url 介面路由
     * @param file 介面檔案
     * @param auth 是否需要帶登入資訊
     */
    uploader(url, file, auth = false) {
        let param = new FormData();
        param.append('file', file)
        if (auth) {
            return axios.post(url, param, {headers: {Authorization: 'Your back-end user authenticates information'}})
        } else {
            return axios.post(url, param)
        }
    },
}

可以在 專案 /scr/http/ 下面建立 一個檔案 api 然後在裡 根據 專案模組 建立 介面檔案 方便管理

專案 /scr/http/api.js 程式碼

import Goods from './api/goods.js';

export default {
    // 首頁
    Index: {
        index: '/index/index'
    },

    // 個人中心
    Home: {
        UserInfo: '/user/info'
    },

    // 當然也可以用檔案方式進行管理
    Goods: Goods

}

專案 /scr/http/api/goods.js 中程式碼

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

專案 /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);
          }
    }

})

上面已經準備好了。那麼接下來就是 專案 /scr/min.js 中新增程式碼

專案 /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>

接下來是 代理配置

專案 /vue.config.js 程式碼

// 後端請求地址 注意[他會根據你環境的不同從而獲取的 env 檔案不同]
const target = process.env.APP_API_URL;

module.exports = {
  devServer: {
    // 所有的介面請求代理
  proxy: {
      '/api': {
        target: target,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
              '^api': ''
        }
      }
    }
  }
}

env 檔案區別 請參考 https://cli.vuejs.org/zh/guide/mode-and-en... 環境變數模式

本作品採用《CC 協議》，轉載必須註明作者和本文連結
你還差得遠吶！

相關文章