解决跨越问题，和分装API的一种方式:

1.为什么分装API呢，这样做的好处是，有利于后期维护，方便修改.

 这种方法的步骤是1：首先在vue的项目中创建一个vue.config.js文件里面写入module.exports = {// 设置路径publicPath : "./",devServer: {port: 8888, // 端口号，如果端口号被占用，会自动提升1host: "localhost", //主机名， 127.0.0.1， 真机 0.0.0.0https: false, //协议open: true, //启动服务时自动打开浏览器访问proxy: {   //配置解决跨越\[process.env.VUE_APP_BASE_API]: {target: process.env.VUE_APP_SERVICE_URL, // 代理地址changeOrigin: true,  //开启代理pathRewrite: {["^" + process.env.VUE_APP_BASE_API]: ''}}}
},
lintOnSave: false, // 关闭格式检查
productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度
}
2：再创建一个 .env.development 文件
里面写
VUE_APP_SERVICE_URL ="http://mengxuegu.com:7300/mock/5f50b5d58d90085e5b5840a4/jy"  //这个是api数据地址
VUE_APP_BASE_API = "/fff"  //这个后面的可以随便写3：再创建一个 .env.production 文件
里面写
VUE_APP_SERVICE_URL = "http://localhost:8001"   //解决跨越问题

2.上面创建完后在src里面创建一个文件比如 utils，然后里面再创建一个js文件，比如创建一个request.js 里面先引入axios，然后写请求和响应拦截器并且导出,(注释，这是自己记录一下，随便写的，代码都是自己做的项目里面写的记录如下)

import axios from 'axios'// 创建axios实例，在axios实例里面可以自定义一些请求的选项
const req = axios.create({
// 设置公共路径
baseURL: process.env.VUE_APP_BASE_API,
timeout:5000  //设置请求超时时间
})// 请求拦截器
req.interceptors.request.use(
config => {// store.state.Loading = truereturn config;
},
error => {return Promise.error(error);
});// 响应req.interceptors.response.use(
response => {// console.log(response)// setTimeout(()=>{// },2000)// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据// 否则的话抛出错误if (response.status === 200) {// store.state.Loading = falsereturn Promise.resolve(response.data);} else {return Promise.reject(response);}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {// if (error.response.status) {return Promise.reject(error);// }
}
);
//   Vue.prototype.$axios = axios      //这是最开始写的axios请求的export default req   //导出req

3.再接着创建一个文件，比如叫api 然后里面创建一个js文件叫test 里面放我们分装后要请求数据的

import axios from "@/utils/request"   //引入request文件export default {   //导出
// list(){        //这是直接引入的整个地址数据
//     return axios({
//         url:"http://mengxuegu.com:7300/mock/5f4f52288d90085e5b583f5e/list/list"
//     })
// }//下面的是在 ..env.development 分装后的地址，然后只引入最后的接口
login(name, pass) {return axios({url: "/deng",method: "post",data: {username: name,userpass: pass}})
},
getUser(){return axios({url:"/yong"})
}
}

4.上面的都完成后，然后只需要在渲染的组件内直接使用就可以了，基础详细代码是：

 // import list from "@/api/test";   //引入// created() {//   list.list().then(res => {//     console.log(res);  //这个res就是我们在test.js文件中请求地址的数据//   });// }

封装API的一种方式，和解决跨越问题相关推荐

继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错? springboot 两种方式稳定解决跨域问题
继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错???springboot 两种方式稳定解决跨域问题! 之前我写了一篇文章,来解决CORS报错 ...
python中调用API的几种方式
python中调用API的几种方式: urllib2 httplib2 pycurl requests urllib2 import urllib2, urllib github_url ='http ...
Spring循环依赖的三种方式以及解决办法
Spring循环依赖的三种方式以及解决办法 [转]https://www.cnblogs.com/liuqing576598117/p/11227007.html 示例 https://github. ...
android动画变黑,Activity添加进入和退出动画的两种方式，解决黑色区域问题
Activity添加进入和退出动画的两种方式,解决黑色区域问题给Activity添加进入和退出动画的操作,大家一定不会陌生.常见的有两种方式,一种是通过style文件给Activity设置Theme ...
google map 地理编码API的两种方式
google 地图在 2018 年7月16之后,开始收费,所以当你需要用到google地图的服务的时候需要开通结算服务,获取到key,具体资费和服务内容 ,请参考google map官网google ...
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
vite 官方默认的配置,如果资源文件在assets文件夹打包后会把图片名加上 hash值,但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析,导致开发环境可以 ...
SoueceTree 本地仓库和贮藏两种方式冲突解决
第一种方式: commit后再pull冲突解决 1.选中冲突文件右键->解决方案->使用我的版本解决冲突,这是冲突文件的内容是我最初本地文件内容.这时先commit再push一下即可. ...
HOOK API 的几种方式
**HOOK API** 是指截获特定进程或对某个API函数的调用,使得API的执行流程转向指定代码. 1.需要将可以代替API执行的函数的执行代码注入到目标进程 2.再将进程对该API函数的调用改为 ...
使用pip安装python库的几种方式，解决pip安装python库慢的问题
1.使用pip在线安装 1.1 安装单个package 格式如下: pip install SomePackage 示例如下: 比如:pip install scipy或者指定版本安装:pip ins ...

封装API的一种方式，和解决跨越问题

解决跨越问题，和分装API的一种方式:

1.为什么分装API呢，这样做的好处是，有利于后期维护，方便修改.

3.再接着创建一个文件，比如叫api 然后里面创建一个js文件叫test 里面放我们分装后要请求数据的

4.上面的都完成后，然后只需要在渲染的组件内直接使用就可以了，基础详细代码是：

封装API的一种方式，和解决跨越问题相关推荐

最新文章

热门文章