axios配置--练习篇（仿照已有axios相关博客。。。。。）

axios简介

axios是基于promise的http库。axios特性包括响应式拦截请求，转换json,vue自动携带token等。

1.创建axios实例，配置baseUrl

2.配置请求头get,post方法

//创建axios实例
const service = axios.create({
  //配置项
  baseURL: config.API_BASEURL,
  headers: {
    get: {
      'Context-type': 'application/x-www-form-urlencoded;charset=utf-8',
    },
    post: {
      'Content-type': 'application/json;charset=utf-8',
    },
  },

3.跨域验证，允许超时

4.请求拦截，响应拦截（根据http状态码，400-500类似）

请求拦截之token拦截

service.interceptors.request.use(
  config => {
    //判断vuex中是否存在token
    //存在的话每一次请求都要加token,后台根据token判断登录情况
    var token = store.state.token
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  err => {
    err.data = {}
    err.data.msg = '服务器异常，请联系管理员'
    return Promise.resolve(err)
  },
)

完整代码

import config from '@config/config'
import { store } from '@/store'
//创建axios实例
const service = axios.create({
  //配置项
  baseURL: config.API_BASEURL,
  headers: {
    get: {
      'Context-type': 'application/x-www-form-urlencoded;charset=utf-8',
    },
    post: {
      'Content-type': 'application/json;charset=utf-8',
    },
  },
  //跨域请求是否需要凭证
  withCredentials: true,
  //请求30s超时
  timeout: 3000,
  validateStatus: function () {
    return true
  },
  //transformRequest允许在服务器发送请求前，修改请求数据

  transformRequest: [
    function (data) {
      data = JSON.stringify(data)
      return data
    },
  ],
  //transformResponse在传递给then,catch前，允许修改响应数据
})
//请求拦截器
service.interceptors.request.use(
  config => {
    //判断vuex中是否存在token
    //存在的话每一次请求都要加token,后台根据token判断登录情况
    var token = store.state.token
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  err => {
    err.data = {}
    err.data.msg = '服务器异常，请联系管理员'
    return Promise.resolve(err)
  },
)

const showStatus = status => {
  let message = ''
  switch (status) {
    case 400:
      message = '请求错误（400）'
      break
    case 401:
      message = '未经授权，请登录'
      break
    case 403:
      message = '拒绝访问'
      break
    default:
      message = `连接出错${status}`
  }
  return `${message},请联系管理员`
}
//响应拦截器
service.interceptors.response.use(response => {
  const status = response.status
  let message = ''
  if (status != 200) {
    message = showStatus(status)
    if (typeof response.data === 'string') {
      response.data = message
    } else {
      response.data.message = message
    }
  }
  return response
})