购物网站开发问题,衡水网络营销公司,wordpress 5.3,淄博免费网站建设哪家好目录
为什么添加封装该部分#xff1f;
具体代码#xff1a;
对代码的解释#xff1a;
如何使用#xff1f; 为什么添加封装该部分#xff1f; 简化发送 HTTP 请求的流程提供统一的错误处理机制支持用户状态管理和鉴权具备良好的扩展性和灵活性提高开发效率并使得代码…目录
为什么添加封装该部分
具体代码
对代码的解释
如何使用 为什么添加封装该部分 简化发送 HTTP 请求的流程提供统一的错误处理机制支持用户状态管理和鉴权具备良好的扩展性和灵活性提高开发效率并使得代码更加整洁和易于维护 具体代码 import axios from axios
import { ElMessage } from element-plus// 从存储的用户模块中导入useUserStore钩子函数。
import useUserStore from /store/modules/user// 使用axios库创建一个名为api的实例用于发送HTTP请求
const api axios.create({baseURL: (import.meta.env.DEV import.meta.env.VITE_OPEN_PROXY true) ? /proxy/ : import.meta.env.VITE_APP_API_BASEURL,timeout: 1000 * 60,responseType: json,
})api.interceptors.request.use((request) {const userStore useUserStore()/*** 全局拦截请求发送前提交的参数* 以下代码为示例在请求头里带上 token 信息*/if (userStore.isLogin request.headers) {request.headers.Token userStore.token}// 是否将 POST 请求参数进行字符串化处理if (request.method post) {// request.data qs.stringify(request.data, {// arrayFormat: brackets,// })}return request},
)api.interceptors.response.use((response) {/*** 全局拦截请求发送后返回的数据如果数据有报错则在这做全局的错误提示* 假设返回数据格式为{ status: 1, error: , data: }* 规则是当 status 为 1 时表示请求成功为 0 时表示接口需要登录或者登录状态失效需要重新登录* 请求出错时 error 会返回错误信息*/if (response.data.status 1) {if (response.data.error ! ) {// 这里做错误提示如果使用了 element plus 则可以使用 Message 进行提示// ElMessage.error(options)return Promise.reject(response.data)}}else {useUserStore().logout()}return Promise.resolve(response.data)},(error) {let message error.messageif (message Network Error) {message 后端网络故障}else if (message.includes(timeout)) {message 接口请求超时}else if (message.includes(Request failed with status code)) {message 接口${message.substr(message.length - 3)}异常}ElMessage({message,type: error,})return Promise.reject(error)},
)export default api对代码的解释 引入了所需的库和模块 axios用于发送 HTTP 请求。ElMessage来自 Element Plus 的消息提示组件。 导入 useUserStore 钩子函数该函数用于从存储的用户模块中获取用户状态和 token。 创建了一个名为 api 的 axios 实例用于发送 HTTP 请求。在创建实例时根据环境变量设置了基本 URL 和超时时间。 使用 api.interceptors.request.use() 方法注册了一个请求拦截器在请求发送前执行一些操作。具体如下 获取用户状态和 token如果用户已登录且请求头存在则将 token 添加到请求头中。对于 POST 请求可以选择对请求参数进行字符串化处理此部分代码被注释掉。 使用 api.interceptors.response.use() 方法注册了一个响应拦截器在请求返回后进行处理。具体如下 判断响应数据的状态码如果为 1表示请求成功否则视为错误。如果有错误信息则进行全局的错误提示示例代码中使用了 Element Plus 的 ElMessage.error() 方法。如果状态码不为 1调用 useUserStore().logout() 方法以注销用户。 在响应拦截器中使用 Promise.resolve() 返回处理后的数据或使用 Promise.reject() 返回错误信息。 在响应拦截器的错误回调中进行了一些错误信息的处理和提示包括网络错误、超时错误和请求异常错误。 最后将 api 导出供其他模块使用。 如何使用 要使用该代码模块首先确保已安装 Axios 和 Element Plus。然后可以在需要发送 API 请求的地方通过导入 api 模块来使用它例如 import api from /path/to/api// 发送 GET 请求
api.get(/api/endpoint).then(response {// 处理返回的数据}).catch(error {// 处理请求错误})// 发送 POST 请求
api.post(/api/endpoint, { key: value }).then(response {// 处理返回的数据}).catch(error {// 处理请求错误})根据你的具体需求可以调用 api 实例上的不同方法如 get、post、put、delete 等来发送不同类型的请求并在 then 方法中处理成功的响应数据在 catch 方法中处理请求错误
