实际项目中vue封装axios的方式

 

1.安装axios包 （npm install axios --save）

2.创建axios实例 

// 创建axios实例
const service = axios.create({
  baseURL: baseUrl,  //封装的访问地址
  transformRequest: [function (data) {
    // Do whatever you want to transform the data
    return Qs.stringify(data) //从后台得到的数据，qs是一个js库，封装的处理url参数的组件库
  }] 
})

 

3.request拦截器

// request拦截器
service.interceptors.request.use(config => { // let username = store.state.username
  let sessionId = store.state.sessionId
  if (sessionId !== '') {
    config.headers['X-User-Name'] = sessionId
  }
  return config
}, err => {
  return Promise.reject(err)
})

4.response拦截器

// respone拦截器
service.interceptors.response.use(res => {
  if (res.data.result === -102) {
    router.replace('/login')
  }
  return res
}, err => {
  Message({
    showClose: true,
    message: '服务器有事离开一下，马上就回来',
    type: 'error'
  })
  return Promise.reject(err)
})

5.导入service

export default service

以上就是关于axios的封装，以下是封装的访问地址（配置编译环境和线上环境之间的切换）

let baseUrl = ''
let routerMode = 'history'
let urlArray = [
  //链接地址
  //链接地址
  'http://121.76.154.100:8010'
]
// 利用process.env.NODE_ENV设置不同的url，其中development是开发环境，production是生产环境

if (process.env.NODE_ENV === 'development') {
  baseUrl = urlArray[1]
} else if (process.env.NODE_ENV === 'production') {
// baseUrl = '';
}

export {baseUrl, routerMode}

以下是vuex的使用封装

vuex：全局状态管理 （简单来说，就是在state里面定义了一个数据之后，可以在所在项目的任一一个组件中进行获取，修改，并且你的修改可以得到全局的响应变更）

1.安装vuex （npm install vuex--save）

2.

const store = new Vuex.Store({
    state: { //定义设置的数据 },
    mutations:{ //改变设置的数据 }
})

3.引用store 

export default store