经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue项目的网络请求代理到封装步骤详解
来源:jb51  时间:2023/4/28 9:24:53  对本文有异议

1.创建vue项目

  1. vue create demo

demo是项目名称

2.安装axios

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

  1. npm install axios

3.进行config.js配置

  1. devServer: {
  2. host: "0.0.0.0", // 是否可以被覆盖
  3. port: 8090, // 配置本地端口号
  4. open: true,
  5. //解决跨域问题
  6. proxy: {
  7. // 正式
  8. "/api": {
  9. target: "http://IP地址:端口号/",
  10. changeOrigin: true,
  11. secure: false, // 如果是https接口,需要配置这个参数
  12. pathRewrite: {
  13. "^/api": "",
  14. },
  15. },
  16. },
  17. },
  18. },

4.main.js里引入

  1. //http封装请求
  2. import axios from "axios";
  3. axios.defaults.baseURL = "/api";
  4. axios.defaults.headers = //公共携带请求头
  5. //大部分是 "Content-Type:application/json;charset=UTF-8"
  6. axios.defaults.withCredentials = true;

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

  1. import axios from "axios";//引入axios
  2. const request = axios.create({//进一步封装axios
  3. baseURL: "/api",//配置跟路由
  4. timeout: 5000,//配置请求超时时间
  5. });
  6. //添加请求拦截器
  7. request.interceptors.request.use(function (config) {}
  8. //添加响应拦截器
  9. request.interceptors.request.use((res) => {
  10. return res;
  11. }),
  12. (err) => {
  13. return Promise.reject(err);
  14. };
  15. export default request;
  16. //暴露出去

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

  1. import request from "@/utils/request"; // 引入request
  2. // 登录
  3. export const UserLogin = (params) => {//封装login请求
  4. return request({
  5. url: "/login",//请求地址
  6. method: "post",//请求方式
  7. data: params,//请求体
  8. });
  9. };

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

简单明了

到此这篇关于Vue项目的网络请求代理到封装步骤详解的文章就介绍到这了,更多相关Vue网络请求代理到封装内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号