zoukankan      html  css  js  c++  java
  • 封装axios

    'use strict'
    
    import axios from 'axios'
    import qs from 'qs'
    import {
        Message
    } from 'element-ui';
    
    axios.interceptors.request.use(config => {
        // loading
        return config
    }, error => {
        return Promise.reject(error)
    })
    
    axios.interceptors.response.use(response => {
        return response
    }, error => {
        return Promise.resolve(error.response)
    })
    
    function checkStatus(response) {
        // 如果http状态码正常,则直接返回数据
        if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
            return response
            // 如果不需要除了data之外的数据,可以直接 return response.data
        }
        // 异常状态下,把错误信息返回去
        return {
            status: -404,
            msg: response.data.message
        }
    }
    
    function checkCode(res) {
        // 如果code异常(这里已经包括网络错误,服务器错误,后端抛出的错误),可以弹出一个错误提示,告诉用户
        if (res.status === -404) {
            Message({
                message: res.msg,
                type: 'error',
                duration: 3 * 1000
            })
        }
        // code 200正常返回数据 404暂无数据
        if (res.data && (res.data.code != 200) && (res.data.code != 404)) {
            Message({
                message: res.data.message,
                type: 'error',
                duration: 3 * 1000
            })
        }
        // 401未登录
        if (res.data.code == 401) {
            Message({
                message: res.data.message,
                type: 'error',
                duration: 3 * 1000
            })
        }
        return res
    }
    
    export default {
        post(url, data) {
            return axios({
                method: 'post',
                // baseURL: 'https://webmaster.q-huan.link/home/index',
                url,
                data: qs.stringify(data),
                timeout: 5000,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(
                (response) => {
                    return checkStatus(response)
                }
            ).then(
                (res) => {
                    return checkCode(res)
                }
            )
        },
        get(url, params) {
            return axios({
                method: 'get',
                // baseURL: 'https://webmaster.q-huan.link/home/index',
                url,
                params, // get 请求时带的参数
                timeout: 5000,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            }).then(
                (response) => {
                    return checkStatus(response)
                }
            ).then(
                (res) => {
                    return checkCode(res)
                }
            )
        }
    }
    http
              .get(api.login, {
                code: that.user_text,
                pwd: that.psd_text
              })
              .then(res => {
                let respon = res.data;
                if (respon.code == 200) {
                  // 获取数据成功
                  
                  }
                } else {
                  that.$message.error(respon.msg);
                }
              });
  • 相关阅读:
    Oracle专家高级编程 第二章 服务器和文件
    Oracle专家高级编程 第一章
    Leetcode 4 寻找两个正序数组的中位数
    Leetcode 3 无重复字符的最长子串
    Leetcode 2 两数相加
    Leetcode 1 两数之和
    gitee开源许可证
    js新特性展开符的使用方式
    webpack高速配置
    JS中日期比较时斜杠与横杠的区别
  • 原文地址:https://www.cnblogs.com/chenzeyongjsj/p/9624331.html
Copyright © 2011-2022 走看看