AXIOS基于CORS的封装

最新推荐文章于 2024-08-02 00:06:36 发布

to be fan

最新推荐文章于 2024-08-02 00:06:36 发布

阅读量807

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/yingmd2020/article/details/119894714

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何在Vue应用中配置和使用Axios库进行API请求，并结合Ant Design Vue的notification组件实现错误提示。内容包括设置请求拦截器添加token，响应拦截器处理不同状态码的错误，以及特定情况下如401未授权的处理方式。此外，还提供了用于文件上传的form表单提交方法。

摘要由CSDN通过智能技术生成

import axios from 'axios';
import {
    notification
} from 'ant-design-vue'
import Cookies from 'js-cookie'; // yarn add js-cookie
// 请求baseUrl
const BASE_URL = process.env.VUE_APP_REQUEST_BASE_URL

const initInstance = function (contentType) {
    let instance = axios.create({
        headers: {
            'content-type': contentType || 'application/json'
        },
        baseURL: BASE_URL,
        timeout: 30000,
        withCredentials: true //  每次请求携带用户凭证(cookie、HTTP身份验证和TLS客户端证书)
    })

    // 添加请求拦截器
    instance.interceptors.request.use(function (config) {
        // 请求头中添加 "X-Access-Token"，服务器从中获取token
        config.headers["X-Access-Token"] = Cookies.get('token')
        return config
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
    })

    // 添加响应拦截器
    instance.interceptors.response.use(function (response) {
        if (+response.data.code !== 200) {
            notification.error({
                message: '系统提示',
                description: response.data.message,
                duration: 4
            })
        }
        return response.data
    }, err => {
        let code = err.response.status;
        let msg = "系统出现错误,请刷新页面重试！"
        switch (+code) {
            case 401:
                msg = "token已失效，请重新登录"
                setTimeout(() => {
                    window.location.href = "/login";
                }, 300);
                break;
        }
        notification.error({
            message: '系统提示',
            description: msg,
            duration: 4
        })
    })
    return instance;
}



export default function (url, params, methods = "post") {
    const instance = initInstance();
    return new Promise((resolve, reject) => {
        let req = null
        if (methods === 'post') {
            req = instance.post(url, params)
        } else {
            req = instance.get(url, {
                params: params
            })
        }
        req.then(res => resolve(res)).catch(err => reject(err))
    })
}
// 用于上传文件 用form表单提交
export const formSubmit = function (url, form) {
    const instance = initInstance("multipart/form-data");
    return new Promise((resolve, reject) => {
        let req = null
        req = instance.post(url, form)
        req.then(res => resolve(res)).catch(err => reject(err))
    })
}