在前段項(xiàng)目中，請求 api 以及請求方式進(jìn)行封裝，該封裝為了簡單，更加好的管理后端所給的接口，請求代碼的復(fù)用性，代碼簡單化。

10年積累的做網(wǎng)站、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有瑞麗免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

安裝 axios

   $ npm install axios

創(chuàng)建目錄文件

在 src 中創(chuàng)建 http 目錄

在 http 目錄中創(chuàng)建 http.js 用戶所以請求的方式

在 http 目錄中創(chuàng)建 api.js 用于存放后端提供接口

在 http 目錄中創(chuàng)建 axios.js 用戶做 axios 攔截器

在根目錄下面 創(chuàng)建 vue.config.js 用戶 請求代理配置

接下里就是代碼

項(xiàng)目 /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 接口參數(shù)
     * @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 接口參數(shù)
     * @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)
        }
    },
}

可以在 項(xiàng)目 /scr/http/ 下面創(chuàng)建 一個文件 api 然后在里 根據(jù) 項(xiàng)目模塊 創(chuàng)建 接口文件 方便管理

項(xiàng)目 /scr/http/api.js 代碼

import Goods from './api/goods.js';
export default {
    // 首頁
    Index: {
        index: '/index/index'
    },
    // 個人中心
    Home: {
        UserInfo: '/user/info'
    },
    // 當(dāng)然也可以用文件方式進(jìn)行管理
    Goods: Goods
}

項(xiàng)目 /scr/http/api/goods.js 中代碼

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

項(xiàng)目 /scr/http/axios.js 中代碼

import axios from 'axios';
// 請求攔截
axios.interceptors.request.use(config => {
    // 1. 這個位置就請求前最后的配置
  // 2. 當(dāng)然你也可以在這個位置 加入你的后端需要的用戶授權(quán)信息
  return config
}, error => {
    return Promise.reject(error)
})
// 響應(yīng)攔截
axios.interceptors.response.use(response => {
  // 請求成功
  // 1. 根據(jù)自己項(xiàng)目需求定制自己的攔截
  // 2. 然后返回數(shù)據(jù)
  return response;
}, error => {
    // 請求失敗
      if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    // 對400錯誤您的處理\
                break
                case 401:
                    // 對 401 錯誤進(jìn)行處理
                break
                default:
                // 如果以上都不是的處理
                return Promise.reject(error);
          }
    }
})

上面已經(jīng)準(zhǔn)備好了。那么接下來就是 項(xiàng)目 /scr/min.js 中添加代碼

項(xiàng)目 /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'
// 對后端接口 進(jìn)行全局注冊
Vue.prototype.$api = api;
// 對請求方式 進(jìn)行全局注冊
Vue.prototype.$http = http;
那么接下來就是使用了
項(xiàng)目 /src/views/index/index.vue 中我們對他進(jìn)行使用
<template>
     <div>
     </div>
 </template>
<script>
  export default {
        name: "Index",
        mounted() {
            this.handle()
        },
        methods: {
            handle(){
                // 當(dāng)然如果你需要帶登錄信息去請求這個接口 可以在 路由后面跟上 true 或者 false 來決定是否在請求的時候帶登錄信息
                // 我們這樣進(jìn)行封裝 就對一個 請求封裝好了。
               this.$http.get(this.$api.Index.index,true).then((result) => {
               })
            }
        }
    }
</script>
<style scoped>
</style>

接下來是 代理配置

項(xiàng)目 /vue.config.js 代碼

// 后端請求地址 注意[他會根據(jù)你環(huán)境的不同從而獲取的 env 文件不同]
const target = process.env.APP_API_URL;
module.exports = {
  devServer: {
    // 所有的接口請求代理
  proxy: {
      '/api': {
        target: target,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
              '^api': ''
        }
      }
    }
  }
}

網(wǎng)站名稱：如何在Vue中對Axios進(jìn)行封裝？
文章轉(zhuǎn)載：http://chinadenli.net/article8/giieip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、用戶體驗(yàn)、小程序開發(fā)、面包屑導(dǎo)航、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)