Vue项目的网络请求代理到封装步骤详解
作者:世界的尽头就是打工人 时间:2024-04-30 10:23:55
1.创建vue项目
vue create demo
demo是项目名称
2.安装axios
进入demo里面打开终端(黑窗口),执行
npm install axios
3.进行config.js配置
devServer: {
host: "0.0.0.0", // 是否可以被覆盖
port: 8090, // 配置本地端口号
open: true,
//解决跨域问题
proxy: {
// 正式
"/api": {
target: "http://IP地址:端口号/",
changeOrigin: true,
secure: false, // 如果是https接口,需要配置这个参数
pathRewrite: {
"^/api": "",
},
},
},
},
},
4.main.js里引入
//http封装请求
import axios from "axios";
axios.defaults.baseURL = "/api";
axios.defaults.headers = //公共携带请求头
//大部分是 "Content-Type:application/json;charset=UTF-8"
axios.defaults.withCredentials = true;
5.src目录下新建Utils文件夹,在内封装request.js
import axios from "axios";//引入axios
const request = axios.create({//进一步封装axios
baseURL: "/api",//配置跟路由
timeout: 5000,//配置请求超时时间
});
//添加请求 *
request.interceptors.request.use(function (config) {}
//添加响应 *
request.interceptors.request.use((res) => {
return res;
}),
(err) => {
return Promise.reject(err);
};
export default request;
//暴露出去
6.以login路由为示例 src文件下新建api文件,在api内新建login.js
import request from "@/utils/request"; // 引入request
// 登录
export const UserLogin = (params) => {//封装login请求
return request({
url: "/login",//请求地址
method: "post",//请求方式
data: params,//请求体
});
};
7.在页面内引入方法,并使用
简单明了
来源:https://www.cnblogs.com/shengjiangMock/p/17358837.html
标签:Vue,网络请求,封装
0
投稿
猜你喜欢
使用SQLSERVER 2005/2008 递归CTE查询树型结构的方法
2024-01-27 15:13:10
goland把go项目打包进docker镜像的全过程记录
2024-04-25 13:17:32
Django项目连接MongoDB的三种方法
2022-05-27 05:23:43
基于javascript的Form表单验证
2024-04-10 16:20:03
python3+PyQt5使用数据库窗口视图
2023-03-08 10:44:26
asp 过滤非法字符函数
2011-04-07 10:39:00
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2022-12-03 09:33:06
java连接数据库增、删、改、查工具类
2024-01-21 22:01:48
基于Vue.js的表格分页组件
2024-05-02 16:41:50
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2024-01-15 01:23:44
Array.prototype.slice
2010-05-07 12:43:00
深入理解Django的信号机制
2023-01-20 10:19:58
SQL Server基础之行数据转换为列数据
2024-01-19 22:16:00
整合ckeditor+ckfinder,解决上传文件路径问题
2022-12-10 09:25:39
安装PHP遇到“无法载入mysql扩展”解决方法
2007-06-15 15:04:00
跟老齐学Python之开始真正编程
2021-06-26 21:42:22
python文字转语音实现过程解析
2022-10-26 22:13:27
256种编程语言大汇总
2023-05-30 19:06:01
基于python实现双向链表
2022-02-17 04:06:44
计算机科学中32个常用的基础算法
2023-01-25 16:50:19