• (二)vue.js axios封装(参考)


    基于前文所述,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

    深入了解请链接

    axios文档http://www.axios-js.com/zh-cn/docs/

    axios使用说明https://www.kancloud.cn/yunye/axios/234845

    安装

    cnpm install axios --save

    在项目src下新建request/http.js文件,并引入axios

    /**
     * axios封装:请求拦截,响应拦截,错误编码
     */
    import axios from 'axios'

    设置请求超时时间

    /**
     * 默认10S请求超时
     */
    axios.defaults.timeout = 10000;

    设置post请求头

    /**
     * 设置post请求头
     */
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

    设置拦截器拦截请求

    /**
     * 请求拦截器
     */
    axios.interceptors.request.use(
        config => {
            // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
            // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
            const token = store.state.token;
            token && (config.headers.Authorization = token);
            return config;
        },
        error => {
            return Promise.error(error);
        }
    )

    响应请求拦截以及返回服务器状态码

    // 响应拦截器
    axios.interceptors.response.use(
        response => {
            if (response.status === 200) {
                return Promise.resolve(response);
            } else {
                return Promise.reject(response);
            }
        },
        // 服务器状态码不是200的情况    
        error => {
            if (error.response.status) {
                switch (error.response.status) {
                    // 401: 未登录                
                    // 未登录则跳转登录页面,并携带当前页面的路径                
                    // 在登录成功后返回当前页面,这一步需要在登录页操作。                
                    case 401:
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                        break;
                    // 403 token过期                
                    // 登录过期对用户进行提示                
                    // 清除本地token和清空vuex中token对象                
                    // 跳转登录页面                
                    case 403:
                        Toast({
                            message: '登录过期,请重新登录',
                            duration: 1000,
                            forbidClick: true
                        });
                        // 清除token                    
                        localStorage.removeItem('token');
                        store.commit('loginSuccess', null);
                        // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
                        setTimeout(() => {
                            router.replace({
                                path: '/login',
                                query: {
                                    redirect: router.currentRoute.fullPath
                                }
                            });
                        }, 1000);
                        break;
                    // 404请求不存在                
                    case 404:
                        Toast({
                            message: '网络请求不存在',
                            duration: 1500,
                            forbidClick: true
                        });
                        break;
                    // 其他错误,直接抛出错误提示                
                    default:
                        Toast({
                            message: error.response.data.message,
                            duration: 1500,
                            forbidClick: true
                        });
                }
                return Promise.reject(error.response);
            }
        }
    )

    封装get请求和post请求

    /**
     * get请求
     * @param {String} url 请求地址
     * @param {Object} params 请求参数
     */
    export function get(url, params) {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                params: params
            }).then(res => {
                resolve(res.data);
            }).catch(err => {
                reject(err.data)
            })
        });
    }
    
    /** 
     * post方法,对应post请求 
     * @param {String} url [请求的url地址] 
     * @param {Object} params [请求时携带的参数] 
     */
    export function post(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, {
                params: params
            }).then(res => {
                resolve(res.data);
            }).catch(err => {
                reject(err.data)
            })
        });
    }
  • 相关阅读:
    基于密度的optics聚类算法
    unicode编码和utf-8编码详解
    聚类分析之k-prototype算法解析
    python学习笔记之正则表达式1
    聚类分析之模糊C均值算法核心思想
    Matlab编程笔记之GUI程序转exe
    Matlab学习笔记之安装教程
    SVPWM原理分析-基于STM32 MC SDK 5.0
    Allego Quick Reports
    SVPWM-实战
  • 原文地址:https://www.cnblogs.com/chendongbky/p/9940171.html
走看看 - 开发者的网上家园