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、设置请求头等。响应拦截器可以用于在响应返回后执行一些操作，例如处理错误信息、剥离无效数据等。

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})}