vue如何动态更改url接口地址

  • Z时代
  • 2024-03-04
  • 分类：IT

vue如何动态更改url接口地址

上传图片的接口地址如下，想在不同页面调用的时候在接口地址后面拼上不同的名字，比如当前页面我想调用这个/api/b2bmall/v1.0/file/upload/img/customer，在调用接口的地方应该这么做修改，感谢各位

import request from '@/utils/request'
//上传图片
export function uploadImg(data) {
  return request({
    url:'/api/b2bmall/v1.0/file/upload/img',
    method:'post',
    data:data,
    headers:{
        'Content-Type': 'multipart/form-data', // 默认值
    }
  })
}
  uploadImg(formData).then(response=>{
           console.log(response)
         })

回答：

import request from '@/utils/request'
//上传图片
export function uploadImg(data, x) {
  return request({
    url:`/api/b2bmall/v1.0/file/upload/img/${x}`,
    method:'post',
    data:data,
    headers:{
        'Content-Type': 'multipart/form-data', // 默认值
    }
  })
}
uploadImg(formData, 'customer').then(response=>{
   console.log(response)
 })

回答：

可以把请求用一个文件整理好，页面中直接调用就行了。

类似建一个api.js文件。这样方便管理，到时修改、新增接口地址的时候，直接改这个文件就行了。页面上只需传递所需的参数就行了。
例如：

import request from '@/utils/request'
export const uploadImg = (params) => request({
    url:'/api/b2bmall/v1.0/file/upload/img',
    method:'post',
    data:params,
})
export const uploadCustomerImg = (params) => request({
    url:'/api/b2bmall/v1.0/file/upload/img/customer',
    method:'post',
    data:params,
})

然后在页面上使用

import { uploadCustomerImg } from '@/api';
<script>
export default {
    methods: {
        getData() {
            uploadCustomerImg('参数').then(res=>{})
        }
    }    
}
</script>

以上是 vue如何动态更改url接口地址 的全部内容， 来源链接： utcz.com/p/936620.html

回到顶部