vue專案封裝請求完整版(帶有詳細說明)

先介紹下整體檔案目錄,以及需要改動的檔案,做到心里有數:
(為了方便大家直接復制使用,有些創建專案自帶的我也會復制下來,做了修改的地方會具體說明)

上面紅色框框包起來的檔案就是新增或者修改的地方,下面會逐一做詳細說明

1.創建一個serve檔案夾,并創建一個index.js檔案,里面寫axios相關的配置

import axios from 'axios'     //需要先下載依賴:  npm install axios
import md5 from 'js-md5'      //需要先下載依賴:  npm install js-md5   這個東西是用來加密的,根據實際需要添加
var Axios = axios.create({     //創建axios請求
    baseURL: '/',
    timeout: 10000,           //設定請求超時時間
    responseType: 'json',
    withCredentials: true,  // 是否允許帶cookie這些
    crossDomain: true,
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    }
  })
  Axios.interceptors.request.use(    //設定請求攔截器,就是在發送請求前做一些資料操作等
    config => {
      if (config.data && config.data.body) {
        const stringBody = JSON.stringify(config.data.body)
        Object.assign(config.data, {    //這里的操作就是將下面的三個屬性添加在每個請求引數里
          id: md5(stringBody),          //stringBody就是請求的引數,通過md5進行加密轉換
          sign: md5(stringBody + new Date().getTime()),
          timestamp: new Date().getTime()
        })
      }
      return config       //最后一定要將配置return出去
    },
    error => {          //請求錯誤時回傳錯誤資訊
      return Promise.reject(error.data.error.message)
    }
  )
Axios.interceptors.response.use(         // 回傳狀態判斷(添加回應攔截器)
    res => {
      return res.data.body
    },
    error => {
      console.log(error)
    }
  )
  //  下面是封裝的請求,并暴露出去,方便其它檔案匯入使用
  // get請求           
export const GET = url => {
    return body =>
      Axios.get(url, {
        params: body
      })
  }
  console.log(GET);
  // post請求
  export const POST = (
    url,
    config = {
      showLoading: true
    }
  ) => {
    return body => Axios.post(url, body, config)
  }
  export const PUT = (
    url,
    config = {
      showLoading: true
    }
  ) => {
    return body => Axios.put(url, body, config)
  }
  
  export const DELETE = url => {
    return body =>
      Axios.delete(url, {
        params: body
      })
  }
  
  export default Axios
  

2.在專案根目錄創建三個不同的專案環境組態檔,這個在vue.cli官方檔案有說明

整體檔案位置在本文最上面可以看到

先創建一個 .env.dev 檔案,  //這個是開發環境配置
檔案內容:   
NODE_ENV="production"
VUE_APP_ENV="dev"

再創建一個 .env.test 檔案, //這個是測驗環境配置
檔案內容:
NODE_ENV="production"
VUE_APP_ENV="test"

最后創建一個 .env.production 檔案, //這個是生產環境配置
檔案內容:
NODE_ENV="production"
VUE_APP_ENV="pro"

3.創建一個config檔案夾,做環境和域名的配置:

1.先在該檔案夾創建一個 apiConfig.js 檔案,做不同環境的域名配置:(下面域名都是假的,根據自己實際情況修改)

export default {
    dev: {
      ApiUrl: 'http://123.57.67.20:000000'
    },
    test: {
      ApiUrl: 'https://aaaaaaaaaaaaaa.com'
    },
    prod: {
      ApiUrl: 'https://bbbbbbbbbbbbbb.com'
    }
  }
  

2.在該檔案夾下繼續創建一個index.js檔案:

import { GET, POST, PUT, DELETE } from '@/server'    //從server檔案夾的index檔案中匯入這4種請求方式
import appConfig from '@/config/apiConfig'    //匯入上面的環境域名組態檔
const { ApiUrl } = appConfig[process.env.VUE_APP_ENV ? process.env.VUE_APP_ENV : 'dev']   
//根據不同環境配置不同環境下的apiurl并在請求中使用
export { GET, POST, PUT, DELETE, ApiUrl }   //匯出請求方式

4.創建一個api檔案夾,用于存放開發中需要使用的請求:

1.在api檔案夾下再創建一個modules檔案夾
在此檔案夾記憶體放開發中的請求介面:(請求介面一般根據不同分類存放在多個js檔案內)
例如我創建了一個board.js 檔案,用于存放一些介面:

import { POST, ApiUrl } from '@/config/index'    //匯入對應的請求方式以及環境配置apiurl
// 獲取.....資料
const getAgricultureData = POST(`${ApiUrl}/api/backapp.......`)    //以此post介面為例子
const intelligentBreedingController = year => {
  return GET(`${ApiUrl}/gateway/api/backapp/indust.....dfwf/${year}`)()
}   //以此get介面為例子
export default {
  getAgricultureData: getAgricultureData   //匯出post介面請求方法名
  intelligentBreedingController //匯出get介面請求方法名  因為屬性名和屬性值一樣時可以簡寫一個 ,所以這里可以直接寫一個名字就行
} 

2.同時在modules檔案夾下創建一個index.js檔案,用于對匯出介面檔案做處理

const files = require.context('.', false, /\.js$/)   //匹配js結尾的檔案,也就是要匹配modules檔案夾下的介面檔案
const modules = []
files.keys().forEach(key => {   //實際中會根據分類創建多個介面檔案,所以這里做遍歷得到每個介面檔案
  if (key === './index.js') return    //判斷如果是當前這個index.js檔案就return出去
  const item = files(key).default     //如果是介面檔案就全部放在modules檔案內并匯出去
  modules.push(item)
})
export default modules

3.在api這個檔案夾內創建一個index.js檔案,用于得到介面檔案中所有具體的api介面

import modules from './modules'    
const Api = {}
modules.map(m => {     //得到每個介面并匯出
  Object.assign(Api, m)
})
export default Api

5.在main.js檔案中匯入axios,并將每個請求介面都掛載到vue上,

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Api from '@/api'    //匯入上面api檔案下的所有請求介面

Vue.config.productionTip = false
Vue.prototype.$axios = Api   //這里就是將請求掛載在vue原型上,方便后面直接通過this.$axios...呼叫介面
console.log(Vue.prototype);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

6.具體使用方法:

1.以post請求方式的介面為例:

 methods: {
    async getAgricultureData() {   //這里是配置請求引數
      const params = {
        body: {
          params: {
            years: 2021,
          },
        },
      };
      try {
        const res = await this.$axios.getAgricultureData(params);  //發送請求
        console.log(res);   //請求成功時的操作
      } catch (error) {
        console.log(error);   //請求失敗時的操作
      }
    },
  },

2.以get請求方式的介面為例:

 methods: {
    async intelligentBreedingController() {
      const params = this.selectYear    //創建引數
      try {
        const res = await this.$axios.intelligentBreedingController(params)   //發送請求
        console.log(res);   //請求成功時的操作
      } catch (error) {    //請求失敗時的操作
        if (typeof error == 'string') {    //這里對請求失敗時回傳的錯誤型別做了判斷,根據實際情況來
          this.$message.error(error)
        } else {
          this.$message.error('資料獲取失敗')  
        }
      }
 }

請求方式就像上面寫的一樣,需要注意的是,在呼叫介面時,并沒有在.vue檔案中進行匯入,
這正是因為我們已經做了全域掛載,只需要直接使用,最后就是在哪里需要呼叫,呼叫methods中的
方法名即可.例如上面例子在created()宣告周期函式中呼叫對應的方法名