axios 封装

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {

// Tip: 1
// 请求开始的时候可以结合 vuex 开启全屏的 loading 动画

// Tip: 2 
// 带上 token , 可以结合 vuex 或者重 localStorage
// if (store.getters.token) {
//     config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
// } else {
//     // 重定向到登录页面    
// }

// Tip: 3
// 根据请求方法,序列化传来的参数,根据后端需求是否序列化
// if (config.method.toLocaleLowerCase() === 'post' 
//   || config.method.toLocaleLowerCase() === 'put' 
//   || config.method.toLocaleLowerCase() === 'delete') {

//   config.data = qs.stringify(config.data)
// }
      


  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, error => {



  //  1.判断请求超时
  // if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
  //   console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了,你可以在这里加入超时的处理方案')
  //   // return service.request(originalRequest);//例如再重复请求一次
  // }

  //  2.需要重定向到错误页面
  // const errorInfo = error.response
  // console.log(errorInfo)
  // if (errorInfo) {
  //   // error =errorInfo.data//页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
  //   const errorStatus = errorInfo.status; // 404 403 500 ... 等
  //   router.push({
  //     path: `/error/${errorStatus}`
  //   })
  // }

 
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
    return response.data


 


    // 根据返回的code值来做不同的处理(和后端约定)
			// switch (data.code) {
			// 	case '':
			// 	break;
			// 	default:
			// }
			// 若不是正确的返回code,且已经登录,就抛出错误
			// const err = new Error(data.description)

			// err.data = data
			// err.response = response

			// throw err

 


  /**
  * code为非20000是抛错 可结合自己业务进行修改
  */
    // const res = response.data
    // if (res.code !== 20000) {
    //   Message({
    //     message: res.message,
    //     type: 'error',
    //     duration: 5 * 1000
    //   })

    //   // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
    //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
    //     MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
    //       confirmButtonText: '重新登录',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       store.dispatch('FedLogOut').then(() => {
    //         location.reload()// 为了重新实例化vue-router对象 避免bug
    //       })
    //     })
    //   }
    //   return Promise.reject('error')
    // } else {
    //   return response.data
    // }
  },error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

基本的使用


 
import request from '@/utils/request'

export default {

 
  checkExsis(data) {
    return request({
      url: '/login/checkExsis',
      method: 'get',
      params: { iphone: data }
    })
  },
 
 
  getInfo(token) {
    return request({
      url: '/login/getInfo',
      method: 'get',
      params: { token }
    })
  }
  login(username, password) {
    return request({
      url: '/user/login',
      method: 'post',
      data: {
        username,
        password
      }
    })
  },

}


封装 主要看封装后自己使用是否喜欢这样使用啊。 Vue二次封装axios为插件使用