1. 程式人生 > 其它 >vue封裝axios

vue封裝axios

記得要安裝axios 哦,npm install axiosvue-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