自定义封装Ajax返回值

package cn.blue.utils;

import java.util.HashMap;

/**
 * 用于ajax
 * 
 * @author Blue
 *
 */
public class Result extends HashMap<String, Object> {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private Result() {
	}

	public static Result success() {
		return new Result().setCode(0);
	}

	public static Result error(int code) {
		return new Result().setCode(code);
	}

	public Result add(String key, Object value) {
		this.put(key, value);
		return this;
	}

	public Result setCode(int code) {
		this.put("code", code);
		return this;
	}

	public int getCode() {
		return this.getValue("code");
	}

	public Result setMsg(String msg) {
		this.put("msg", msg);
		return this;
	}

	public String getMsg() {
		return this.getValue("msg");
	}

	public <T> T getValue(String key) {
		return (T) this.get(key);
	}
}

### Vue 3 中封装带有请求头的 AJAX 调用 在 Vue 3 应用程序中,可以通过 `axios` 实现带请求头的 AJAX 请求封装。为了提高代码可维护性和复用性,通常会创建一个独立的服务文件来管理所有的 HTTP 请求。 #### 安装 Axios 首先需要确保项目中有 `axios` 的支持: ```bash npm install axios ``` #### 创建 Axios 实例并配置默认选项 接着在一个单独的 JavaScript 文件(比如命名为 `api.js` 或者 `httpService.js`),初始化一个新的 Axios 实例,并为其设定全局性的属性,像基础 URL 和公共头部信息等[^1]。 ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基本URL timeout: 5000 // 设定超时时间 }); // 添加请求拦截器以便于修改请求配置或者添加token到headers里 service.interceptors.request.use( config => { const token = localStorage.getItem('authToken'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); export default service; ``` 这段代码展示了如何利用 Axios 提供的功能来自定义请求行为,特别是通过请求拦截器自动向每个发出的请求附加认证令牌作为请求头的一部分[^3]。 #### 使用 TypeScript 进行增强 如果是在使用 TypeScript 开发,则可以在上述基础上进一步优化接口设计,使类型更加安全可靠。例如,当发起 GET 请求获取特定类型的资源列表时,可以这样写: ```typescript interface ResponseData<T> { code: number; message?: string | null; result: T; } function fetchList<T>(url: string): Promise<ResponseData<Array<T>>> { return service.get(url).then(response => ({ ...response.data, result: response.data.result || [] })); } ``` 这里不仅限定了返回值的具体结构,还借助泛型机制让每次调用都能携带不同的数据模型,从而提高了灵活性和安全性。 #### 发起具体请求 最后,在组件内部或其他地方就可以方便地调用这些预设好的方法来进行网络交互了: ```javascript import service from './path/to/httpService'; async function getUserInfo(userId){ try{ let res = await service.post('/users/info', {userId}); console.log(res); }catch(err){ console.error("Error occurred while fetching user info:", err); } } ``` 以上就是关于在 Vue 3 中如何优雅地封装具有自定义请求头的 AJAX 请求的方法介绍[^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值