封装http请求

在utils下的axios中写入

import Vue from 'vue'

import axios from 'axios'

import { getToken, userLoginOut } from './auth'

import router from '../router'

import { baseUrl } from '@/common/env.js'

let vm = new Vue()

const ajax = axios.create({

  baseURL: baseUrl,

  timeout: 30000

})

/** 请求拦截器 **/

ajax.interceptors.request.use(

  config => {

    const token = getToken()

    if (token) {

      config.headers.Authorization = token

    }

    return config

  },

  error => {

    return Promise.reject(error)

  }

)

/** 响应拦截器 **/

ajax.interceptors.response.use(

  response => {

    if (response.data.code === -1) {

      vm.$message({

        message: '登录已过期,请重新登录',

        type: 'error'

      })

      userLoginOut()

      router.push({

        name: 'Login'

      })

      return

    }

    if (response.status === 200) {

      return Promise.resolve(response.data)

    } else {

      return Promise.reject(response.data.message)

    }

  },

  error => {

    return Promise.reject(error)

  }

)

/* 统一封装get请求 */

export const get = (url, params, config = {}) => {

  return new Promise((resolve, reject) => {

    ajax({

      method: 'get',

      url,

      params,

      ...config

    })

      .then(response => {

        resolve(response)

      })

      .catch(error => {

        reject(error)

      })

  })

}

/* 统一封装post请求  */

export const post = (url, data, config = {}) => {

  return new Promise((resolve, reject) => {

    ajax({

      method: 'post',

      url,

      data,

      ...config

    })

      .then(response => {

        resolve(response)

      })

      .catch(error => {

        reject(error)

      })

  })

}

/* 统一封装put请求  */

export const put = (url, data, config = {}) => {

  return new Promise((resolve, reject) => {

    ajax({

      method: 'put',

      url,

      data,

      ...config

    })

      .then(response => {

        resolve(response)

      })

      .catch(error => {

        reject(error)

      })

  })

}

/* 统一封装delete请求  */

export const deletefn = (url, data, config = {}) => {

  return new Promise((resolve, reject) => {

    ajax({

      method: 'delete',

      url,

      data,

      ...config

    })

      .then(response => {

        resolve(response)

      })

      .catch(error => {

        reject(error)

      })

  })

}

// 上传文件

export const upload = (url, data, config = {}) => {

  return new Promise((resolve, reject) => {

    ajax({

      method: 'post',

      url,

      data,

      ...config

    })

      .then(response => {

        console.log(response)

        resolve(response)

      })

      .catch(error => {

        reject(error)

      })

  })

}

// 下载文件

export const downLoad = (url, data, config = { responseType: 'blob' }) => {

  return new Promise((resolve, reject) => {

    ajax({

      method: 'get',

      url,

      data,

      ...config

    })

      .then(response => {

        resolve(response)

      })

      .catch(error => {

        reject(error)

      })

  })

}

=======================================================================

common.js中写入

/************************* 测试环境 ***********************/

const ip = ''

const baseUrl = ip + '/credit' // 本地测试用

/************************* 正式环境 ***********************/

// const ip = '' // 测试服

// const ip = '' // 正式服

// const baseUrl = ip + '/credit'

 

/********************* 图片上传管理 ***********************/

const upload = ip + '/upload/'

const myValidator = {

  regExpPhone: /^1([345789])[0-9]\d{8}$/,

  regExpEmail: /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/,

  regExpPassword: /.{6,20}$/

}

module.exports = {

  ip,

  baseUrl,

  upload,

  myValidator

}

==================================================================

utils下的auth用于封装存储

export function setToken(val) {

  localStorage.setItem('token', val)

  localStorage.setItem('isLogin', true)

}

==================================================================

最后在api中引入即可

import { get, post, put, downLoad, deletefn } from '@/utils/axios'

// 用户登录

export function login(data) {

  return post('/site/login', data).then(res => {

    return res

  })

}