axios简单的二次封装

import axios from 'axios'
import { Message} from 'element-ui'
import store from '../store' //vuex
import { getToken } from '@/utils/auth' //token

// 创建axios实例

const service = axios.create({
    //baseURL: "https://www.cnblogs.com", // api的base_url
    timeout: 5000 // 请求超时时间
})

//http request 拦截器
service.interceptors.request.use(
    config => {
      config.headers = {
        'Content-Type':'application/x-www-form-urlencoded',
        'X-Token':getToken()
      }
      return config;
    },
    error => {
      return Promise.reject(err);
    }
  );

//响应拦截器即异常处理
service.interceptors.response.use(response => {
    console.log(response)
    return response
}, err => {
    if (err && err.response) {
       
      switch (err.response.status) {
        case 400:
            //console.log('错误请求')
            Message({message: '错误请求', type: 'error'});
          break;
        case 401:
            console.log('未授权，请重新登录')
          break;
        case 403:
          console.log('拒绝访问')
          break;
        case 404:
          console.log('请求错误,未找到该资源')
          break;
        case 405:
          console.log('请求方法未允许')
          break;
        case 408:
          console.log('请求超时')
          break;
        case 500:
          console.log('服务器端出错')
          break;
        case 501:
          console.log('网络未实现')
          break;
        case 502:
          console.log('网络错误')
          break;
        case 503:
          console.log('服务不可用')
          break;
        case 504:
          console.log('网络超时')
          break;
        case 505:
          console.log('http版本不支持该请求')
          break;
        default:
          console.log(`连接错误${err.response.status}`)
      }
    } else {
      console.log('连接到服务器失败')
    }
    return Promise.resolve(err.response)
})

function fromdata(type, url, data) {
    return new Promise((reslove, reject) => {
    service({
        method: type,
        url: url,
        data: data //java后台用qs转
      })
        .then(res => {
         // store.commit('UPDATE_LOADING', false); //隐藏loading
          //这里可以添加指定对应状态码的处理方式,比如登陆过期,res.data.code === '6666' 路由跳转到login
          if(res.data.code==0){
            reslove(res);
          }else{
              console.log(res.data.message)
              console.log(res)
            Message({message: '错误请求', type: 'error'});
          }
        })
        .catch(err => {
          //store.commit('UPDATE_LOADING', false); //隐藏loading
          reject(err.message);
          Message({message: '错误请求', type: 'error'});
          //Message.error(e.message);
        });
    });
  }

export default fromdata

上文件保存为http.js使用时引入

例子

import fromdata from '@/utils/http'

 

fromdata('post','url',Data)