vuex-开发-测试-生产环境-配置axios

1、vue2 使用 vue-cli 安装的项目 config 目录下面都有 dev.env.js/test.env.js/prod.env.js 文件，做相应的修改，添加 API_ROOT

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"http://www.eastgrain.cn"'
})

2、src 下面添加 api 目录添加 api.js 文件

import axios from 'axios'

// 创建配置
const Axios = axios.create({
  baseURL: process.env.API_ROOT,
  timeout: 20000,
  headers: {'Content-Type': 'application/json'}
})

// request 拦截器 请求开始显示 loading 等等
Axios.interceptors.request.use((config) => {console.log(config, 'config axios 配置')
  // 显示 loading...
  return config
}, (error) => {return Promise.reject(error)
})

// response 拦截器
Axios.interceptors.response.use((response) => {console.log(response, 'axios response 配置')
  // 这里可以做处理，response.data.code 错误码不同显示不同错误信息
  return response.data
}, (error) => {return Promise.reject(error)
})
export default Axios

3、在文件中调用

import Axios from '@/api/api'
methods: {
    // 访问接口
    getFormData () {Axios.post('customer/modifyUserInfo.json', {phone: 15001209233}).then((success) => {console.log(success)// 这里可以出发 vuex 中的 mutations、actions 来修改 vuex state 中的数据 }).then((err) => {console.log(err) })
    },