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

2024年1月22日 170次阅读 来源: zxc19890923

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) })
    },
    原文作者：zxc19890923
    原文地址: https://segmentfault.com/a/1190000019514670
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞