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方法安装插件。