(精华2020年5月12日更新) vue实战篇 axio.js封装和环境配置

首先安装

npm i cross-env 

package.jsom

"scripts": {
    "test":"cross-env scene=test webpack --config webpack.config.js",
    "dev": "cross-env scene=dev webpack-dev-server --config webpack.config.js",
    "build": "cross-env scene=prod webpack --config webpack.config.js"
  },

再到webpack.config.js配置

// 插件
    plugins: [
           new webpack.DefinePlugin({
                'sceneParam': JSON.stringify(process.env.scene),
                'laney':JSON.stringify('laney'),
                'test':'"kkkkk"'
            })
    ]

sceneParam变量就能在vue文件中直接获取

vue中封装axio.js
首先在main.js引入对应的axio封装文件

import Vue from 'vue';

import axios from './providers/axios.js';
import api from './providers/api.js';
Vue.prototype.$axios = axios;
Vue.prototype.$api = api;

axio.js文件

// 使用数据拦截器
import axios from 'axios';
import Qs from 'qs';
import {
  Message
} from 'element-ui';
axios.defaults.timeout = 5000;

// env_config
// dev  开发环境
// test  测试环境
// build  线上环境
var urlObj = {
  dev: 'http://localhost:8081',
  test: 'http://localhost:8081/',
  build: 'https://www.17npw.net/api/'
}
console.log(urlObj[sceneParam]);
// Message('这是一条消息提示');
axios.defaults.baseURL = urlObj[sceneParam]; //填写域名

//http request 拦截器  客户端给服务端 的数据 
axios.interceptors.request.use(
  config => {

    config.headers.common = {
      'X-API-TOKEN': localStorage.getItem('token'),
      'version': '1.0',
      'Content-Type': 'application/json;charset=UTF-8'
    }
    console.log('begin');

    if (config.data.form) {
      //转化成formData格式
      // transformRequest只能用在 PUT, POST, PATCH 这几个请求方法
      config.transformRequest = [function (data) {
        //方式一
        delete data.form;
        // var ret = '';
        // for (let it in data) {
        //   ret += it+'=' +data[it] + '&';
        // }
        // return ret.substring(0,ret.length-1);

        //方式二：
        var test2 = Qs.stringify(data);
        return test2;
      }]
    }

    return config;
  },
  error => {
    return Promise.reject(err);
  }
);

//响应拦截器即异常处理 -  -- 服务给客户端的数据进行处理
axios.interceptors.response.use(response => {
  if (response.status === 200) {
    return Promise.resolve(response);
  } else {
    return Promise.reject(response);
  }
  // return response
}, err => {
  if (err && err.response) {
    var errorMsg = '';
    switch (err.response.status) {
      case 400:
        console.log('错误请求')
        errorMsg = '错误请求';
        break;
      case 401:
        console.log('未授权，请重新登录');
        errorMsg = '未授权，请重新登录';
        break;
      case 403:
        console.log('拒绝访问')
        errorMsg = '拒绝访问';
        break;
      case 404:
        console.log('请求错误,未找到该资源')
        errorMsg = '请求错误,未找到该资源';
        break;
      case 405:
        console.log('请求方法未允许')
        errorMsg = '请求方法未允许';
        break;
      case 408:
        console.log('请求超时')
        errorMsg = '请求超时';
        break;
      case 500:
        console.log('服务器端出错')
        errorMsg = '服务器端出错';
        break;
      case 501:
        console.log('网络未实现')
        errorMsg = '请求方法未允许';
        break;
      case 502:
        console.log('网络错误')
        errorMsg = '网络错误';
        break;
      case 503:
        console.log('服务不可用')
        errorMsg = '服务不可用';
        break;
      case 504:
        console.log('网络超时')
        errorMsg = '网络超时';
        break;
      case 505:
        console.log('http版本不支持该请求')
        errorMsg = 'http版本不支持该请求';
        break;
      default:
        console.log(`连接错误${err.response.status}`)
    }

    Message({
      message: errorMsg,
      type: 'warning'
    });

  } else {
    console.log('连接到服务器失败')
  }
  return Promise.resolve(err.response)
})

export default {
  //post方法 
  //     post(url,params){
  //         return new Promise((resolve,reject)=>{
  //             return axios.post(url,params)
  //             .then((response)=>{
  //                 if(response.status==200){
  //                     resolve(response.data);
  //                 }

  //             })
  //         })

  //     },

  //     // 方式二： 包装一个 直接利用axios自身是一个Promise对象的思想封装
  //   post (url, params) {
  //        return axios.post(url,params)
  //         .then(response => {
  //           if(response.status==200){
  //             return Promise.resolve(response.data); 
  //             //注意必须要有return，相当于new Promise里的resolve，告诉接口已经获取数据
  //           } 
  //         })
  //         .catch(err => {
  //           reject(err)
  //         })
  //   },

  // //方式三
  // // 注意： axios在配置headers头的时候，会合并拦截器和函数封装里的headers的选项
  //   post (url, params) {
  //       return axios({
  //         method: 'post',
  //         url:url,
  //         data: params,
  //         headers:{
  //             'X-API-TOKEN':localStorage.getItem('token'),
  //             'Content-Type': isForm ? typearr['form'] : typearr['json'],
  //             'test':'ppp'
  //       }
  //       }).then((response) => {

  //         if(response.status==200){
  //           return Promise.resolve(response.data)  
  //         } 
  //         },(e) => {
  //           return Promise.reject(e)
  //         }) 
  //         // 或者catch捕获异常
  //         .catch(function (error) {

  //         })
  //   },
  //方式四：
  async post(url, params) {
    var res = await axios({
      method: 'post',
      url: url,
      data: params
    });
    return res.data;

  },

  /**
   * 封装patch请求
   * @param url
   * @param data
   * @returns {Promise}
   */

  patch(url, data = {}) {
    return new Promise((resolve, reject) => {
      axios.patch(url, data)
        .then(response => {
          resolve(response.data);
        })
    })
  },

  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
          params: params
        })
        .then(response => {
          resolve(response.data);
        })
    })
  },
}

api.js

export default {
    basic:{
        login:'/api/login',
        info:'/api/info',
        msg:'/api/msg',
        hello:'/api/hello'

    },
    userInfo:{
        
    }
}

在vue文件中使用

<template>
    <div class="home-page">
     我是新闻页面
    <!-- {{infoData}} -->
    <ul>
        <li v-for="(item,index) in infoData" :key="index"> {{item.name}}:{{item.content}}  </li>
    </ul>
    </div>
</template>
<script>
export default {
    data(){
        return {
            infoData:{}
        }
    },
    methods:{
        getInfoList2(){
            var res = this.$axios.post(this.$api.basic.info,{
                kind:'school',
                form:true
            }).then((res)=>{  
                console.log(res);
            });
        },
        
        getInfoList(){
          this.$axios.post(this.$api.basic.info,{
              kind:'school',
              form:true
          }).then((res)=>{
              this.infoData = res.result;
              console.log('res.tag',res.tag)

                if(res.tag==1){
                    return  this.$axios.post(this.$api.basic.msg,{
                        tag:res.tag,
                        form:false
                    })
                }
          }).then((res)=>{
              console.log(res)
          })
  
        }
    },
    mounted(){
        // this.getInfoList2();
        this.getInfoList();
        
    }
}
</script>