Vue3中axios请求封装、请求拦截与相应拦截详解

目录

• 前言
• axios请求封装
• 请求拦截和响应拦截
• 接口的请求
• 总结

前言

对于三者放在Service.js中封装，方便使用

axios.create 的作用是创建一个新的 axios 实例，该实例可以具有自定义配置。通过使用 axios.create，您可以为任何 API 生成一个客户端，并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加方便，因为您可以为每个 API 创建一个单独的实例，并在每个实例中设置不同的配置。

axios.create 方法接受一个配置对象作为参数，该对象包含以下属性：

• baseURL：用于所有请求的基本 URL。
• headers：要发送的自定义 headers。
• timeout：指定请求超时之前的毫秒数。
• withCredentials：指示是否应该使用跨站点访问控制（CORS）凭据。
• xsrfCookieName：用作 xsrf 令牌值的cookie的名称。
• xsrfHeaderName：包含 xsrf 令牌值的 HTTP 头的名称。

例如，以下代码创建了一个新的 axios 实例，并将其配置为使用 /api/ 作为基本 URL：

const instance = axios.create({
  baseURL: '/api/'
});

axios请求封装

// 用create创建axios实例
const Service = axios.create({
    timeout: 3000,
    baseURL: 'http://127.0.0.1:8888/api/private/v1/',
    headers: { 'Content-type': 'application/json;charset=utf-8' }
 
})
 
// get 数据请求封装
export const get = config => {
    return Service({
        ...config,
        method: 'get',
        data: config.data,
    })
 
}
 
// post 数据请求封装
export const post = config => {
    return Service({
        ...config,
        method: 'post',
        data: config.data,
    })
 
}

请求拦截和响应拦截

在 Vue3 中，可以使用 Axios 库来进行 HTTP 请求。Axios 库提供了请求拦截器和响应拦截器，以便在请求发送和响应返回时执行一些操作。

请求拦截器可以用于在请求发送前执行一些操作，例如添加 token、设置请求头等。响应拦截器可以用于在响应返回后执行一些操作，例如处理错误信息、剥离无效数据等。

let loadingObj = null;
// 请求拦截，增加loading，对请求统一处理
Service.interceptors.request.use((config) => {
    loadingObj = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    return config;
})
 
 
// 相应拦截，对返回值做同意处理
Service.interceptors.response.use(response => {
    loadingObj.close();
    const data = response.data;
    if (!data.data) {
        ElMessage.error(data.meta.msg || '服务器错误')
    }
    else {
        ElMessage({
            message: '登录成功',
            type: 'success',
            duration: 1500
        })
    }
    return response.data;
}, error => {
    loadingObj.close();
    ElMessage({
        message: '服务器错误',
        type: 'error',
        duration: 2000
    })
})

接口的请求

import { get, post } from './service'
// 登录数据请求
export const loginAPI = data => {
    return post({
        url: '/login',
        data
    })
}

总结

到此这篇关于Vue3中axios请求封装、请求拦截与相应拦截的文章就介绍到这了,更多相关Vue3 axios请求封装、拦截内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！