axios请求的封装（包含断网处理，和服务器错误）

最新推荐文章于 2025-08-06 14:36:16 发布

原创

最新推荐文章于 2025-08-06 14:36:16 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文展示了如何封装axios请求，包括在Vue项目中的注册方法，以及处理断网和服务器错误的情况。代码示例提供了在main.js中定义并引入axios的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面这块代码是我使用axios封装的多种请求方式，如需使用，直接将下面代码复制到项目中，命名为http.js文件

import axios from 'axios';


export default {    
    /**
     * POST请求
     * @param {string} url 接口地址
     * @param {object} request 请求参数
     * @param {Boolean} isUploadImg 是否上传图片,非必传参数，默认为false
     */
    post(url, request, isUploadImg) {
        const headers = {
            headers: {
                'Content-Type': isUploadImg ? 'multipart/form-data' : "application/json;charset=UTF-8",
                "Authorization":JSON.parse(localStorage.getItem('loginInfo')) ?  'JWT ' +  JSON.parse(localStorage.getItem('loginInfo')).jp_token : '',
            }
        }
        return new Promise((resolve, reject) => {
            axios.post(url , request, headers).then((response) => {
                resolve(response)
            }, (error) => {
                if(error.request.status == 500){
                    var img = new Image();
                    //临时判断网络是否通畅