zoukankan      html  css  js  c++  java
  • axios post,get 封装,支持数据类型

    import axios from 'axios'
    import store from '../vuex/store'
    import router from '../router/index'
    import { stringify } from 'qs'  //qs模块
    
    // axios 配置
    axios.defaults.timeout = 5000;
    axios.defaults.baseURL = '';
    
    // http request 拦截器
    axios.interceptors.request.use(
      config => {
        if (store.state.token) {
          config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
      },
      err => {
        return Promise.reject(err);
      });
    
    // http response 拦截器
    axios.interceptors.response.use(
      response => {
        return response;
      },
      error => {
        if (error.response) {
          switch (error.response.status) {
            case 401:
              // 401 清除token信息并跳转到登录页面
              //store.commit(types.LOGOUT);
              router.replace({
                path: 'login',
                query: {redirect: router.currentRoute.fullPath}
              });
              break;
            case 403:
              break;
            case 504:
              break;
            case 500:
              //store.dispatch(types.AJAX_ERROR,500);
              break;
            case 404:
              //store.dispatch(types.AJAX_ERROR,404);
              break;
          }
        }
        console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
        return Promise.reject(error.response.data)
      });
    
    /*{
      type:type,
        params:params,
    }*/
    // 封装请求
    export function fetch (url, options) {
      var opt = options || {}
      return new Promise((resolve, reject) => {
        axios({
          method: opt.type || 'post',
          url: url,
          params: opt.params || {},
          // 判断是否有自定义头部,以对参数进行序列化。不定义头部,默认对参数序列化为查询字符串。
          data: (opt.headers ? opt.data : stringify(opt.data)) || {},
          responseType: opt.dataType || 'json',
          // 设置默认请求头
          headers: opt.headers || {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
        }).then(response => {
          if (response.data.code === 0) {
            resolve(response.data)
          } else if (response.data.code === '000') {
            resolve(response.data)
          } else {
            reject(response.data)
            //store.commit('SET_LOADING', false)
          }
        }).catch(error => {
          console.log(error)
          reject(error)
          //store.commit('SET_LOADING', false)
        })
      })
    }
    
    export default axios;

    使用axios封装的功能

    import { fetch } from '../../util/api'
    
    //用户登录
    export const userLogin= (data)=> fetch('/api/users/api/userLogin',{
      data,
      'type':'post'
    });
  • 相关阅读:
    如何将本地项目发布到gitee?
    spingboot使用redis连接池报错
    swagger2中UI界面接口点击无法展开问题解决
    idea在Mybatis的xml里面写sql时,表名、字段、报红问题的解决方法
    svn如何创建分支
    Java 反射修改类的常量值、静态变量值、属性值
    Vue简单入门
    Ajax原理简说
    《机器学习Python实现_10_15_集成学习_lightgbm_进一步优化》
    《机器学习Python实现_10_14_集成学习_xgboost_优化介绍》
  • 原文地址:https://www.cnblogs.com/szatpig/p/7608718.html
Copyright © 2011-2022 走看看