一、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方法安装插件。
原创文章，作者：KZNV，如若转载，请注明出处：https://www.506064.com/n/149613.html
微信扫一扫 
支付宝扫一扫 