zoukankan      html  css  js  c++  java
  • vue axios 封装(一)

    封装一:

    'use strict'
    
    import axios from 'axios'
    import qs from 'qs'
    import NProgress from 'nprogress'
    import vm from '../main'
    
    axios.interceptors.request.use(config => { //利用拦截器做预处理
        // 这里可以加一些动作, 比如来个进度条开始动作,
        NProgress.start()
        return config
    }, error => {
        return Promise.reject(error)
    })
    
    axios.interceptors.response.use(response => response, error => Promise.resolve(error.response)) // 这里我们把错误信息扶正, 后面就不需要写 catch 了
    
    //处理来自网络或者服务器的错误
    function checkStatus(response) {
        NProgress.done()
    
        // if (response.status == 666) {
        //      localStorage.clear();
        // 	 this.$router.push('/')
        // }
        // 如果 http 状态码正常, 则直接返回数据
        // 200请求成功 304浏览器缓存
        if (response.status === 200 || response.status === 304 || response.status == 400) {
            return response
        }
        if (response.status == 401) {
            console.log("token错误");
            vm.$router.push("/");
            return response
        }
        // 异常状态下, 把错误信息返回去
        // 因为前面我们把错误扶正了, 不然像 404, 500 这样的错误是走不到这里的
        return {
            data: {
                code: -404,
                message: response.statusText,
                data: response.statusText,
            }
        }
    }
    //处理来自程序端的错误,
    function checkCode(res) {
    
        // 如果状态 code 异常(这里已经包括网络错误, 服务器错误, 后端抛出的错误), 可以弹出一个错误提示, 告诉用户
        if ((res.data.code || res.data.Code) && res.data.code !== 1000) {
            //登录超时--重新登录
            if (res.data.code === 1100) {
                //alert("会话过期...,请重新登录...")
                vm.$router.push('/')
            } else if (res.data.Code === 1500) {
                vm.$message.error({
                    message: res.data.Error,
                    type: "error"
                });
            } else {
                vm.$message.error({ message: '服务器开小差了,请稍后再试', type: "error" });
            }
        }
        return res;
    }
    
    export default {
        post(url, data) {
            const token = JSON.parse(localStorage.getItem("token"))
    
            return axios({
                method: 'post', //请求协议
                url, //请求地址
                data: qs.stringify(data), //请求的数据
                timeout: 60000, //超时时间---单位是毫秒
                headers: {
                    'Authorization': token ? token.token_type + ' ' + token.access_token : '',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                    'AJAX_FLAG': ' TRUE'
                } //请求头
            }).then(checkStatus).then(checkCode)
        },
        postList(url, data) {
            const token = JSON.parse(localStorage.getItem("token"));
            return axios({
                method: 'post', //请求协议
                url, //请求地址
                data: data, //请求的数据
                timeout: 60000, //超时时间---单位是毫秒
                headers: {
                    'Authorization': token ? token.token_type + ' ' + token.access_token : '',
                    'X-Requested-With': 'XMLHttpRequest',
                    // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                    'AJAX_FLAG': ' TRUE'
                } //请求头
            }).then(checkStatus).then(checkCode)
        },
        get(url, params) {
            const token = JSON.parse(localStorage.getItem("token"));
            return axios({
                method: 'get', //请求协议
                url, //请求地址
                params, //请求的数据
                timeout: 60000, //超时时间---单位是毫秒
                headers: {
                    'Authorization': token ? token.token_type + ' ' + token.access_token : '',
                    'X-Requested-With': 'XMLHttpRequest',
                    'AJAX_FLAG': ' TRUE'
                } //请求头
            }).then(checkStatus).then(checkCode)
        },
        delete(url, params) {
            const token = JSON.parse(localStorage.getItem("token"));
            return axios({
                method: 'delete', //请求协议
                url, //请求地址
                params, //请求的数据
                timeout: 60000, //超时时间---单位是毫秒
                headers: {
                    'Authorization': token ? token.token_type + ' ' + token.access_token : '',
                    'X-Requested-With': 'XMLHttpRequest',
                    'AJAX_FLAG': ' TRUE'
                } //请求头
            }).then(checkStatus).then(checkCode)
        },
        put(url, data) {
            const token = JSON.parse(localStorage.getItem("token"))
            return axios({
                method: 'put', //请求协议
                url, //请求地址
                data: qs.stringify(data), //请求的数据
                timeout: 60000, //超时时间---单位是毫秒
                headers: {
                    'Authorization': token ? token.token_type + ' ' + token.access_token : '',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                    'AJAX_FLAG': ' TRUE'
                } //请求头
            }).then(checkStatus).then(checkCode)
        },
        putList(url, data) {
            const token = JSON.parse(localStorage.getItem("token"))
            return axios({
                method: 'put', //请求协议
                url, //请求地址
                data: data, //请求的数据
                timeout: 60000, //超时时间---单位是毫秒
                headers: {
                    'Authorization': token ? token.token_type + ' ' + token.access_token : '',
                    'X-Requested-With': 'XMLHttpRequest',
                    // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                    'AJAX_FLAG': ' TRUE'
                } //请求头
            }).then(checkStatus).then(checkCode)
        },
    }
    
  • 相关阅读:
    js根据ip地址获取城市地理位置
    vue-cli项目中使用mock结合axios-mock-adapter生成模拟数据
    将图片转canvas
    判断浏览器是否联网
    头尾固定中间高度自适应布局 css
    经典闭包
    多余文字转化为省略号css
    $.grep()
    node 图片转base64
    CentOS 7下安装Mysql 5.7
  • 原文地址:https://www.cnblogs.com/cc-freiheit/p/9933577.html
Copyright © 2011-2022 走看看