码迷,mamicode.com
首页 > 移动开发 > 详细

axios封装(使用了element-ui的消息提示)

时间:2020-07-20 13:13:37      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:request   head   UNC   发送   config   efault   一个   string   local   

/** Axios请求
 * @Author: xuhong
 * @Date: 2020/6/19
 * @DESC: //TODO
 */

import axios from ‘axios‘;
import baseUrl from "./config";
import {Message} from ‘element-ui‘

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

/**
 * 发送请求,处理请求失败
 *
 * request(url, method, data, callback)
 * request(url, method, callback)
 * request(url, callback)
 *
 * @param url
 * @param method 默认get
 * @param data
 * @param callback - 需要一个参数接收返回的数据
 *
 * @return 返回的数据,正常情况有返回,否则没有
 */
async function request(url, method = ‘get‘, data, callback) {
    if (typeof data == ‘function‘) {
        callback = data;
        data = ‘‘;
    }
    if (typeof method == ‘function‘) {
        callback = method;
        method = ‘get‘;
    }

    // axios配置 - 公共配置
    const instance = axios.create({
        baseURL: baseUrl, // 基础URL, 需要服务端处理跨域问题
        timeout: 5000, // 超时时间
    });

    // 拦截器处理完成后需要放行
    // 请求拦截器
    instance.interceptors.request.use((config) => {
        // 全局添加calcelToken
        config.cancelToken = source.token;

        // 携带token
        config.headers.Authorization = localStorage.loginData ? JSON.parse(localStorage.loginData).token : ‘‘;
        return config;
    }, (err) => {
        Message.error({message: ‘连接不到服务器,请稍后再试‘, offset: 150});
        console.log(‘连接不到服务器,请稍后再试‘);

        return false;
    });
    // 响应拦截器
    instance.interceptors.response.use((res) => {
        if (res.status && res.status == 200) {
            if (res.data.code == 200) {
                !callback || callback(res.data.data);
                return res.data.data ? res.data.data : true;

                // 登录失效
            } else if (res.data.code == 3001) {
                // 重新获取token
                (async function () {
                    let token = await request(‘/userAccount/updateToken‘);
                    if (token) {
                        let loginData = JSON.parse(localStorage.loginData);
                        loginData.token = token;
                        localStorage.loginData = JSON.stringify(loginData);
                        location.reload();

                        // 取消其它进行的请求
                        source.cancel();
                    }
                })();
            } else {
                Message.error({message: res.data.message, offset: 150});
                console.log(res.data.message);
            }
        } else {
            // 请求失败
            Message.error({message: ‘请求失败,请稍后再试‘, offset: 150});
        }
        return false;
    }, (err) => {
        Message.error({message: ‘服务器异常,请稍后再试‘, offset: 150});
        console.log(‘服务器异常,请稍后再试‘);
        return false;
    });

    // 发送请求
    return instance({
        method: method,
        url: url,
        // 携带token,或者使用上面的方法,设置ajax请求前的配置
        // headers: {‘Authorization‘: ‘Bearer ‘ + localStorage.token},
        data: data,
        headers: {
            ‘Content-Type‘: ‘application/json‘
        },
    });

}

export default request

 

axios封装(使用了element-ui的消息提示)

标签:request   head   UNC   发送   config   efault   一个   string   local   

原文地址:https://www.cnblogs.com/hsuhung/p/13344247.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!