Vue项目网络请求代理到封装的方法是什么

本文小编为大家详细介绍“Vue项目网络请求代理到封装的方法是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue项目网络请求代理到封装的方法是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

1.创建vue项目

vuecreatedemo

demo是项目名称

2.安装axios

进入demo里面打开终端(黑窗口)，执行

npminstallaxios

3.进行config.js配置

devServer:{host:"0.0.0.0",//是否可以被覆盖port:8090,//配置本地端口号open:true,//解决跨域问题proxy:{//正式"/api":{target:"IP地址:端口号/",changeOrigin:true,secure:false,//如果是http接口，需要配置这个参数pathRewrite:{"^/api":"",},},},},},

4.main.js里引入

//http封装请求importaxiosfrom"axios";axios.defaults.baseURL="/api";axios.defaults.headers=//公共携带请求头//大部分是"Content-Type:application/json;charset=UTF-8"axios.defaults.withCredentials=true;

5.src目录下新建Utils文件夹,在内封装request.js

importaxiosfrom"axios";//引入axiosconstrequest=axios.create({//进一步封装axiosbaseURL:"/api",//配置跟路由timeout:5000,//配置请求超时时间});//添加请求拦截器request.interceptors.request.use(function(config){}//添加响应拦截器request.interceptors.request.use((res)=>{returnres;}),(err)=>{returnPromise.reject(err);};exportdefaultrequest;//暴露出去

6.以login路由为示例 src文件下新建api文件，在api内新建login.js

importrequestfrom"@/utils/request";//引入request//登录exportconstUserLogin=(params)=>{//封装login请求returnrequest({url:"/login",//请求地址method:"post",//请求方式data:params,//请求体});};

7.在页面内引入方法，并使用

读到这里，这篇“Vue项目网络请求代理到封装的方法是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注主机评测网行业资讯频道。

上一篇：Java并发编程之原子类怎么应用

下一篇：怎么去掉IntelliJ?IDEA中mybatis对应的xml文件警告

---