Vue3的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、设置请求头等。响应拦截器可以用于在响应返回后执行一些操作，例如处理错误信息、剥离无效数据等。文章来源地址https://www.toymoban.com/news/detail-437753.html

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请求封装，请求拦截，相应拦截的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！