zoukankan      html  css  js  c++  java
  • axios处理请求拦截器,响应拦截器,请求封装

    request.js

    import axios from 'axios';
    import { Message } from 'element-ui';
    
    const service = axios.create({
      baseURL: 'http://192.168.30.110:8008/', 
    //   baseURL: 'http://192.168.30.59:8008/', 
      timeout: 10000 // request timeout
    });
    
    // http 请求拦截器
    service.interceptors.request.use(
      config => {
        const { token } = window;
        if (token) {
          config.headers.token = token;
        }
        return config;
      },
      error => Promise.reject(error)
    );
    
    function handleSuccess(response) {
      if (!response.success) {
        let message = response.mes || response.message || response.error;
        message = message.slice(0, 100);
        Message({
          type: 'error',
          duration: 3000,
          message
        });
      }
      return response;
    }
    
    // http 响应拦截器
    service.interceptors.response.use(
      // eslint-disable-next-line consistent-return
      response => {
        if (response.status <= 299 && response.status >= 200) {
          return handleSuccess(response.data);
        }
        Message({
          type: 'error',
          duration: 3000,
          message: '请求错误'
        });
      },
      error => {
        if (error.response) {
          const { data } = error.response;
          let message = data.message || data.msg || data.error;
          message = message.slice(0, 100);
          Message({
            type: 'error',
            duration: 3000,
            message
          });
        }
        return Promise.reject(error);
      }
    );
    
    export default service;
    

    使用:

     this.$request({
                    method: 'post',
                    url: `paas/api/exe/prod/${this.featureName}/save`,
                    data: { 0: [data], extr: {topicId: this.topicId} }
                }).then((res) => {})  .catch((error) => {
                        this.$message({
                            message: '提交失败',
                            type: 'error',
                        })
                        console.log(error)
                    })
    

    main.js
    直接挂载在vue全局上

    import request from '@/utils/request.js';
    
    Vue.prototype.$request = request;
    
  • 相关阅读:
    NodeJS学习之3:express和Utility的配合使用
    NodeJS学习之2:express版的Hello World
    NodeJS学习之1:express安装
    9:Node.js GET/POST请求
    8:Node.js 文件系统
    7:Node.js 全局对象
    PowerShell工作流学习-4-工作流中重启计算机
    PowerShell工作流学习-3-挂起工作流
    PowerShell工作流学习-2-工作流运行Powershell命令
    PowerShell工作流学习-1-嵌套工作流和嵌套函数
  • 原文地址:https://www.cnblogs.com/halfsoul/p/14297514.html
Copyright © 2011-2022 走看看