zoukankan      html  css  js  c++  java
  • vue项目对axios的全局配置

    标准的vue-cli项目结构(httpConfig文件夹自己建的):

    api.js:

    //const apiUrl = 'http://test';//测试域名,自己改成自己的
     const apiUrl = 'http://xxoo';//线上域名,自己改成自己的 

    export default apiUrl

    http.js:

    /**
     * ajax请求配置
     */
    import axios from 'axios'
    import apiURL from './api.js'
    //import Qs from 'qs'
    
    import cookie from '../../static/js/cookie.js'
    
    // axios默认配置
    axios.defaults.timeout = 10000;   // 超时时间
    axios.defaults.baseURL = apiURL;  // 默认地址
    
    //整理数据
    axios.defaults.transformRequest = function (data) {
    //data = Qs.stringify(data);
    data = JSON.stringify(data);
      return data;
    };
    
    // 路由请求拦截
    // http request 拦截器
    axios.interceptors.request.use(
      config => {
        //config.data = JSON.stringify(config.data);  
        config.headers['Content-Type'] = 'application/json;charset=UTF-8';
        //判断是否存在ticket,如果存在的话,则每个http header都加上ticket
        if (cookie.get("token")) {
            //用户每次操作,都将cookie设置成2小时
            cookie.set("token",cookie.get("token") ,1/12)    
            cookie.set("name",cookie.get("name") ,1/12)
         config.headers.token = cookie.get("token");
         config.headers.name= cookie.get("name");
        }
        
        return config;
      },
      error => {
        return Promise.reject(error.response);
      });
    
    // 路由响应拦截
    // http response 拦截器
    axios.interceptors.response.use(
      response => {
        if (response.data.resultCode=="404") {
            console.log("response.data.resultCode是404")
            // 返回 错误代码-1 清除ticket信息并跳转到登录页面
    //      cookie.del("ticket")
    //      window.location.href='http://login.com'
            return
        }else{
            return response;
        }
      },
      error => {
        return Promise.reject(error.response)   // 返回接口返回的错误信息
      });
    export default axios;

    main.js

    import axios from './httpConfig/http'
    Vue.prototype.$http = axios

    请求示例:

    //post
    this
    .$http.post('/itemProps/addItemProps',{   name: this.name,   parentId:this.parentId,   sortOrder:0 }).then((res)=>{
      console.log(res) }).
    catch((err)=>{ alert("请求失败") })
    //get
    this.$http.get("/roles/getPersonnelInfoRoles",{
      params:{
        key:"value"
      }
    }).then((res) => {
      console.log(res)
    }).catch((err)=>{
      alert("请求失败")
    })
    青云直上三千码
  • 相关阅读:
    阅读进度条的实现
    获取radio选中的值
    Vue的学习(六)
    Vue的学习(三)
    C#委托详解
    C#泛型和非泛型
    C#装箱和拆箱
    C#内存泄漏的事例
    C#windows服务开发(一)
    C#windows服务开发
  • 原文地址:https://www.cnblogs.com/djjlovedjj/p/9050841.html
Copyright © 2011-2022 走看看