vue 封装请求

最新推荐文章于 2024-08-24 07:00:00 发布

lyf973508

最新推荐文章于 2024-08-24 07:00:00 发布

阅读量572

点赞数

文章标签： vue封装请求

本文链接：https://blog.csdn.net/lyf973508/article/details/89678477

版权

本文介绍了如何在Vue项目中进行API请求的封装，通过创建request.js文件，实现更高效、统一的调用管理。

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

封装请求

首先api目录下新建request.js文件

import axios from "axios/index";
import {Indicator} from 'mint-ui'

axios.defaults.baseURL = '/你的接口';

axios.defaults.timeout = 5000;

let _TOKEN = (function () {
    return localStorage.getItem("token");
})();
axios.defaults.headers.common["Authorization"] = _TOKEN;

//  请求拦截
import axios from "axios/index";
import {Indicator} from 'mint-ui'

axios.defaults.baseURL = '/你的接口';

axios.defaults.timeout = 5000;

let _TOKEN = (function () {
    return localStorage.getItem("token");
})();
axios.defaults.headers.common["Authorization"] = _TOKEN;

//  请求拦截
axios.interceptors.request.use(
    config => {
        Indicator.open({
            spinnerType: 'fading-circle'
        });
        let url = config.url;
        if (url.indexOf("login") > -1) {
            localStorage.setItem('token', "");
            config.headers.Authorization = "";
        }
        if ('token' != '') {
            config.headers.Authorization = 'Bearer ' + localStorage.getItem("token");
        }
        return config
    },
    error => {
        Indicator.close();
        return Promise.reject(error)
    }
);

// 请求捕获
axios.interceptors.response.use(
    response => {
        Indicator.close();
        return response
    },
    error => {
        Indicator.close();
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '请求错误';
                    break;
                case 403:
                    error.message = '当前权限不足';
                    break;
                case 404:
                    error.message = `网络请求错误`;
                    break;
                default:
            }
        }
        return Promise.reject(error)
    }
)

调用

this.$newAjax({
     qs: true,
     url: '/login',
     data: {
        // 传参数
     },
     success(res) {
     ///弹框
         Toast({
             message: '登录成功！',
             duration: 800
         });
         //保存到本地
         localStorage.setItem('token', res.data.access_token);
         self.$router.replace('/home')
     }
 })