vue新建環(huán)境變量以及網絡請求工具axios的二次封裝詳解

更新時間：2023年06月20日 11:08:49 作者：風中凌亂的男子

這篇文章主要為大家介紹了vue新建環(huán)境變量以及網絡請求工具axios的二次封裝詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1. 【環(huán)境變量】背景：

在我們的實際項目開發(fā)中，一般會區(qū)分幾個環(huán)境，分別是開發(fā)環(huán)境、測試環(huán)境和生產環(huán)境，當然不排除分的比較細的還有預發(fā)布環(huán)境，一般來說這四個環(huán)境就足夠我們使用了。

2. 新建環(huán)境步驟：

2.1 在根目錄下新建4個環(huán)境變量文件：

.env.dev【開發(fā)環(huán)境】
.env.test【測試環(huán)境】
.env.uat【預發(fā)布環(huán)境】
.env.prod【生產環(huán)境】
四個環(huán)境內的文件內容如下：

//.env.dev文件
NODE_ENV = dev
# base url
VUE_APP_BASE_URL = "https://dev.it98k.cn"
--------------------------------------------------------------
//.env.test文件
NODE_ENV = test
# base url
VUE_APP_BASE_URL = "https://test.it98k.cn"
--------------------------------------------------------------
//.env.uat文件
NODE_ENV = uat
# base url
VUE_APP_BASE_URL = "https://uat.it98k.cn"
--------------------------------------------------------------
//.env.prod文件
NODE_ENV = prod
# base url
VUE_APP_BASE_URL = "https://prod.it98k.cn"
--------------------------------------------------------------

2.2 修改package.json【scripts】下的啟動命令:

"scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:uat": "vue-cli-service build --mode uat",
    "build:prod": "vue-cli-service build --mode prod"
  },

這樣修改完，本地啟動項目命令依然是：npm run serve
打包測試環(huán)境的命令是：npm run build:test
打包預發(fā)布環(huán)境的命令是：npm run build:uat
打包生產環(huán)境的命令是：npm run build:prod

3. 【基于axios的二次封裝】背景：

在實際開發(fā)項目中，網絡請求基本上使用axios網絡請求工具，但是單純的使用像axios.get('http://xxxxx.com')來請求接口，隨著項目越來越大，頁面越來越多，功能越來越完善，我們勢必會寫大量的axios請求，每次都這么寫，費時費力，也不方便統(tǒng)一管理，所以，需要將axios進行二次封裝，以達到我們開發(fā)項目的時候省時、省力、省心。

3.1新建utils/request.js文件

第一步，在src目錄下，新建utils/request.js文件，文件內容如下：

//首先引入axios
import axios from 'axios'
//然后通過create方法來創(chuàng)建一個請求服務
//然后create方法內有一些配置項，比如接口域名`baseURL`、接口請求超時時間`timeout`
//接口url`url`
//接口請求方式`method`等等，需要我們按需傳入
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // 完整的api地址 = 接口域名+ 接口路徑
  timeout: 5000 // 請求超時時間 5s
})
//下面會定義兩個攔截器，分別是 `請求攔截器`，`響應攔截器`
//`請求攔截器`是前端請求后端接口前處理的一些邏輯，比如開啟loading，配置header請求頭等等
//`響應攔截器`就是后端響應我們前端，返回回來的數(shù)據(jù)，比如我們可以在這響應攔截器內拿到status Code
//拿到后端接口返回的code，關閉loading、根據(jù)code碼處理一些詳細的邏輯等等一系列操作
//request interceptor   請求攔截器  
service.interceptors.request.use(
  config => {
    // do something before request is sent。在發(fā)送請求之前做一些事情
    config.headers['token'] = "xxxxxx"
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// response interceptor  響應攔截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      alert(res.message || 'Error')
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    alert(res.message || 'Error')
    return Promise.reject(error)
  }
)
// 最后暴露我們聲明的 service 服務
export default service

4. api的封裝與使用

api請求方法，也是要做一個封裝的，封裝流程如下

4.1 在src目錄下新建api/index.js文件

文件內容如下：

import request from '../utils/request';
//登錄接口，post方式傳參用data
export function login(data) {
  return request({
    url: '/api/login',
    method: 'post',
    data
  })
}
//獲取xx列表接口，get方式傳參用params
export function getList(params) {
  return request({
    url: '/api/getList',
    method: 'get',
    params
  })
}

4.2 使用封裝好的api

在需要的頁面，比如我們的登錄頁面需要調用登錄接口，我們就要這樣用

//首先第一步要用import導入進來我們的登錄接口
import { login } from '../api/index'
//然后直接調用login方法
login({username:'admin',password:"123456"}).then(res=>{
      console.log(res);
})

以上就是vue新建環(huán)境變量以及網絡請求工具axios的二次封裝詳解的詳細內容，更多關于vue axios封裝的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: