axios请求封装简版

axios封装

请求封装

import axios from 'axios'
import router from './router/index'
import {
  message
} from 'element-ui';
import qs from 'qs'

function getToken() {
  if (localStorage.getItem('token')) {
    let token = localStorage.getItem('token')
    return token
  } else {
    return false
  }
}

class HttpReqeust {
  constructor(config) {
   	// 公共地址
    this.baseURL = config.baseURL
    // 返回的code的值为多少时才是正确的 如果后端返回的不是code 请自行修改响应拦截
    this.code = config.code
  }
  getConfig() {
    const config = {
      baseURL: this.baseURL
    }
    return config
  }
  interceptors(instance) {
    // 请求拦截
    instance.interceptors.request.use(config => {
      if (!config.headers['Content-Type']) {
        config.headers['Content-Type'] =
          'application/x-www-form-urlencoded;charset=UTF-8'    
        if (config.method == 'post') {
          // 空数据不传
          for (var key in config.data) {
            if (config.data[key] === '') {
              delete config.data[key]
            }
          }
        }
      }
      config.data = qs.stringify(config.data)
      const token = getToken()
      if (token) {
        config.headers['Authorization'] = token
      }
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
    // 此处解构的是后台返回的数据结构 res.data就是请求回来的数据
      const {
        data,
        code,
        error
      } = res.data
     // 如果code的正确 返回数据
      if (code == this.code) {
        return {
          data,
          code
        }
      }
      // 如果是正常返回 code不存在 直接取反
      if (!code) {
        return res
      }
      // 如果是错误的 抛出错误数据
      return Promise.reject(error)
    }, error => {
    // 请求错误处理
      if (error && error.response) {
        switch (error.response.status) {
          case 400:
            error.response.message = '请求错误'
            break
          case 401:
            error.response.message = '账户在异地登录，请重新登录'
            break
          case 403:
            error.response.message = '拒绝访问'
            break
          case 404:
            error.response.message = `请求地址出错`
            break
          case 408:
            error.response.message = '请求超时'
            break

          case 500:
            error.response.message = '服务器异常'
            break
          case 501:
            error.response.message = '服务未实现'
            break
          case 502:
            error.response.message = '网关错误'
            break
          case 503:
            error.response.message = '服务不可用'
            break
          case 504:
            error.response.message = '网关超时'
            break
          case 461:
            error.response.message = '用户认证信息失效'
            break
          case 462:
            error.response.message = '账号在异地登录'
            break
          case 505:
            error.response.message = 'HTTP版本不受支持'
            break
          default:
            break
        }
        // 如果错误 返回处理过的错误信息
        message.error(error.response.message)
        if (error.response.status == 401) {
        // 回到登录页
          router.push('/login')
        }
        if (error.response.status == 403) {
        // 回到首页
          router.push('/home')
        }
      }
      return Promise.reject(error)
    })
  }
  // 请求实例封装
  request(options) {
  	// 创建请求实例
    const instance = axios.create()
    // 处理config
    options = Object.assign(this.getConfig(), options)
    // 传递实例到拦截器
    this.interceptors(instance)
    // 抛出请求
    return instance(options)
  }
}

export default HttpReqeust

调用请求

// 引入文件 
import HttpRequest from './request'

// 区分开发模式
const baseUrl = process.env.NODE_ENV === 'development' ? '/api' : '/api2'

// 参数配置
const config = {
  baseURL: baseUrl,
  code : "0"
}
// 传入实例
const axios = new HttpRequest(config)
// 导出
export default axios

封装单独的请求

import axios from './index'

export const getdata = {
  find(data) {
    return axios.request({
      url: '/news/message',
      method: "post",
      data,
      // 设置单独的请求头
      headers: {
        "Content-Type": "application/json"
      }
    })
  },
  getnews(params) {
    return axios.request({
      url: '/gettings/news/message',
      method: "get",
      params  
    })
  }
}

发送请求

import {getdata as api} from './request/index'
var data = {
	num:"10",
	message:"封装后,请求默认会设置请求头，如果单独设置了 就会使用单独配置的请求头"
}
api.find(data).then(res=> {
	console.log(res)
})
var data = {
	"size":10,
	"page":1
}
api.getnews(data).then(res => {
	console.log(res)
})