Vue接口請求怎麼配置請求的地址

一、Vue配置兩個接口請求地址

在Vue中，我們可以使用axios作為我們的網絡請求庫。配置請求地址時，我們可以考慮將請求地址放到一個常量文件中，在這個文件中定義我們的請求地址，對於不同的環境，我們可以對常量文件進行不同的配置。

在以下的示例代碼中，我們定義了兩個請求地址：

// dev.env.js
module.exports = {
  NODE_ENV: '"development"',
  API_BASE_URL: '"http://dev.api.com"',
  IMAGE_BASE_URL: '"http://dev.img.com"'
}

// prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  API_BASE_URL: '"http://api.com"',
  IMAGE_BASE_URL: '"http://img.com"'
}

// request.js
import axios from 'axios'

// 此處的地址為上述環境中定義的請求地址
const apiBaseUrl = process.env.API_BASE_URL
const imgBaseUrl = process.env.IMAGE_BASE_URL

// 配置請求返回數據類型
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

// 以API請求為例
axios.interceptors.request.use(
  config => {
    // 在此處對config進行一些處理
    config.url = apiBaseUrl + config.url
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 以圖片請求為例
axios.interceptors.request.use(
  config => {
    // 在此處對config進行一些處理
    config.url = imgBaseUrl + config.url
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

export default axios

在以上示例代碼中，我們通過導入axios庫來發送請求，在request.js中定義了兩個請求地址：API_BASE_URL和IMAGE_BASE_URL。我們根據環境讀取不同的請求地址，對請求地址進行適當的處理後，返回新的config對象。

二、根據用戶需求指定接口請求地址

在實際開發中，我們需要根據用戶需求靈活地指定請求地址。對於這種情況，我們可以將用戶需要請求的地址作為參數傳遞到請求函數中，對其進行賦值。

以下是示例代碼：

// request.js
import axios from 'axios'

// 請求返回數據類型
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

// 封裝請求函數，並指定請求地址
export function post(url, data, baseUrl) {
  const config = {
    baseURL: baseUrl, // 如果傳遞了自定義的baseUrl直接使用，否則使用上述環境配置的baseUrl
    method: 'post', // 請求方法
    url: url, // 請求地址
    data: data // 請求參數
  }
  return axios(config)
}

在以上示例代碼中，我們首先導入axios庫，在post函數中可以接收3個參數：請求地址url、請求參數data以及自定義的baseUrl。然後，我們根據傳入的參數創建對應的config對象，並最終返回axios發送的請求。

三、使用Vue插件管理請求地址

為了更好地對請求地址進行管理，我們可以考慮使用Vue插件來管理請求地址。以下是示例代碼：

// request.js
import axios from 'axios'

// 請求返回數據類型
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

let apiBaseUrl, imgBaseUrl

const apiInstall = function(Vue, options) {
  if (options.apiBaseUrl) {
    apiBaseUrl = options.apiBaseUrl
    axios.interceptors.request.use(
      config => {
        config.url = apiBaseUrl + config.url
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
  }
}

const imgInstall = function(Vue, options) {
  if (options.imgBaseUrl) {
    imgBaseUrl = options.imgBaseUrl
    axios.interceptors.request.use(
      config => {
        config.url = imgBaseUrl + config.url
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
  }
}

export default {
  apiInstall,
  imgInstall
}

在以上示例代碼中，我們定義了兩個Vue插件：apiInstall和imgInstall，分別用於管理API請求地址和圖片請求地址。在安裝插件時，我們可以傳遞一個包含apiBaseUrl和imgBaseUrl的options對象，來指定自定義的請求地址。最後，我們導出一個默認對象，包含apiInstall和imgInstall兩個方法，用於Vue.use方法安裝插件。