账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue axios封装
    20
    0

    我在学习vue请求数据的时候两个项目中对axios的封装,想知道第一段代码是不是也有拦截器的作用,类似第二段api.interceptors.response.use。望大神能具体讲解一

    /*
     * @Author: sunnie.Song 
     * @Date: 2018-02-06 15:31:19
     * @Description:   数据请求统一封装.
      */
    
    
    //导入模块
    import axios from 'axios'
    import store from '@/vuex/store.js'
    import router from '../router'
    import {server_base_url} from 'util/config'
    import {SET_USER_INFO} from 'store/actions/type'
    
    
    //设置用户信息action
    const setUserInfo = function (user) {
      store.dispatch(SET_USER_INFO, user)
    }
    
    export default function fetch(options) {
      return new Promise((resolve, reject) => {
        // https://github.com/mzabriskie/axios
    
        //创建一个axios实例
        const instance = axios.create({
          //设置默认根地址
          baseURL: server_base_url,
          //设置请求超时设置
          timeout: 2000,
          //设置请求时的header
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-Requested-With': 'XMLHttpRequest'
          }
        })
        //请求处理
        instance(options)
          .then(({data: {code, msg, data}}) => {
            //请求成功时,根据业务判断状态
            if (code === port_code.success) {
              resolve({code, msg, data})
              return false
            } else if (code === port_code.unlogin) {
              setUserInfo(null)
              router.replace({name: "login"})
            }
            Message.warning(msg)
            reject({code, msg, data})
          })
          .catch((error) => {
            //请求失败时,根据业务判断状态
            if (error.response) {
              let resError = error.response
              let resCode = resError.status
              let resMsg = error.message
              Message.error('操作失败!错误原因 ' + resMsg)
              reject({code: resCode, msg: resMsg})
            }
          })
      })
    }
    
    
    import axios from 'axios'
    import store from '@/vuex/store.js'
    import router from '../router'
    
    const api = axios.create();
    api.defaults.baseURL = 'http://api.com';
    api.defaults.timeout = 5000;
    //api.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    //api.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest'
    
    // 请求拦截
    api.interceptors.request.use(function (config) {
    
        // 在发送请求之前做些什么
        store.commit('SET_LOADING',true);
        config.headers={
          'Content-Type': 'application/x-www-form-urlencoded'
          
        }
        // 如果有token,添加到请求报文 后台会根据该报文返回status
        if(store.state.login.token) {
          config.headers.Authorization = `token ${store.state.login.token}`;
        }
    
        return config;
    
      }, function (error) {
        // 对请求错误做些什么
        alert('网络错误,请稍后再试');
    
        store.commit('SET_LOADING',false);
    
        return Promise.reject(error);
      });
    
    // 添加响应拦截器
    api.interceptors.response.use(function (response) {
      console.log(response)
        // 对响应数据做点什么
        // 加到时器主要是为了 展示Loading效果 项目中应去除
        setTimeout(()=>{
          store.commit('SET_LOADING',false);
        },300)
    
        return response;
    
      }, function (error) {
        // 对响应错误做点什么
        store.commit('SET_LOADING',false);
    
        if(errore.response) {
    
          if(error.response.status== 401) {
              // 如果返回401 即没有权限,跳到登录页重新登录
            store.commit('CHANGE_TOKEN',0);
    
            alert('请重新登录');
    
            router.replace({
              path: 'login',
              query: {redirect: router.currentRoute.fullPath}
            })
    
          }
        }
    
        return Promise.reject(error);
      });
    export default api
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 吃土大神 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部