vue封装axios

记得要安装axios 哦,npm install axios vue-axios  -S 

然后再main.js中全局使用 

import axios from './utils/axios';
import VueAxios from 'vue-axios';

//axios,VueAxios的引入
Vue.use(VueAxios, axios);

先分了两个步骤:

1、抽取出来的config文件中就是生成环境以及开发环境的地址

// 开发环境地址
const devUrl = '/api/'

//生产环境地址
// const productionUrl = 'http://115.233.221.136/:81/hy_comm_api/'
const productionUrl = 'http://localhost:8080/api/'
const httpUrl = {
  development: devUrl,
  production: productionUrl
}

const config = {
  baseUrl: httpUrl[process.env.NODE_ENV]
}

export default config

  2、主要的是axios的响应跟请求的封装了

import axios from 'axios'
import Config from './config'
// import { Message } from 'element-ui'

const service = axios.create({
  baseURL: Config.baseUrl,
  timeout: 60000
})

service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

// request拦截器
service.interceptors.request.use(
  config => {
    
    return config
  },
  error => {
    Promise.resolve(error)
  }
)

// respone拦截器
service.interceptors.response.use(
  response => {
    if (response.data.errorcode != 200) {
      console.log(response.config.url)
    }
    return response.data.data
  },
  error => {
    // do something 拦截响应
    return Promise.reject(error)
  }
)

export default service

 

原文地址:https://www.cnblogs.com/easyjie/p/15571177.html