Axios 封装

一、安装 axios

`npm install axios`

二、在文件夹 utils 下创建 request.js 文件

import axios from 'axios' // 引入 axios

const service = axios.create({
    baseURL: "", // 如果需要代理地址的话,可以不设置baseURL
    timeout: 4000,
    headers: {
       // 设置 headers,例如:content-type
    }
})

// 请求拦截器
service.interceptors.request.use(
    request => {
        return request
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        console.log(response)
        //设置响应头 设置允许跨域
        if (response.status != 200) {
            return Promise.reject(new Error(response.statusText || 'Error'))
        }
        const res = response.data;
        if (res.code == 200) {
            return res
        }
    }
)

export default service

三、在文件夹 API 下创建 api.js,封装请求

import service from "@/utils/request";

export const api = (data) => {
    return service.post('/api', data)
}

四、在组件文件中引入使用

import { api } from '@/api/api'

api(data).then( e => {}).catch( e => {})
posted @   东八区  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示