封装写法一:
// 封装接口请求函数
function request(url, method, data, headers) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
// 设置请求头
if (headers) {
Object.keys(headers).forEach(key => {
xhr.setRequestHeader(key, headers[key]);
});
}
// 监听请求完成的事件
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject(xhr.statusText);
}
};
// 监听网络错误的事件
xhr.onerror = function() {
reject("网络错误");
};
// 发送请求
if (method === "GET") {
xhr.send();
} else {
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(data));
}
});
}
// 使用封装的接口请求函数
const apiUrl = "https://api.example.com";
const requestData = { key: "value" };
request(apiUrl, "POST", requestData)
.then(response => {
console.log("请求成功", response);
})
.catch(error => {
console.error("请求失败", error);
});
request
函数封装了一个基本的接口请求逻辑,包括发送请求、处理响应和错误处理等。它接受四个参数:请求的URL、请求方法、请求数据和请求头。它返回一个Promise对象,可以使用.then
和.catch
方法处理请求成功和失败的情况。
封装写法二:
1. 创建一个api
文件夹,用于存放接口相关文件。
2. 在api
文件夹中创建一个request.js
文件,用于封装接口请求函数。
3. 在request.js
文件中,引入axios
或其他网络请求库,然后创建一个请求实例。
4. 在请求实例中定义统一的请求拦截器,可以用于设置请求头、处理请求参数等操作。
5. 在请求实例中定义统一的响应拦截器,可以用于处理接口返回的数据格式、统一处理错误等操作。
6. 在request.js
文件中,创建一个函数,例如request(url, method, data)
,用于向外暴露接口请求方法。
7. 在需要发送接口请求的地方,引入request.js
文件,并调用其中的接口请求方法。
以下是一个简单示例:
// api/request.js
import axios from 'axios';
// 创建请求实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置接口基础路径
timeout: 5000 // 设置请求超时时间
});
// 设置请求拦截器
instance.interceptors.request.use(
config => {
// 在请求发送前进行一些操作,如设置请求头、处理请求参数等
return config;
},
error => {
// 对请求错误进行处理
return Promise.reject(error);
}
);
// 设置响应拦截器
instance.interceptors.response.use(
response => {
// 对接口返回的数据进行处理,如统一处理错误码、格式化数据等
return response.data;
},
error => {
// 对响应错误进行处理
return Promise.reject(error);
}
);
// 暴露接口请求方法
export default function request(url, method = 'GET', data) {
return instance({
url,
method,
data
});
}
使用示例:
// 使用接口请求
import request from './api/request';
request('/user', 'GET')
.then(response => {
// 处理接口返回的数据
})
.catch(error => {
// 处理接口请求错误
});