vue中api使用

npm i element-ui -S
npm install --save axios vue-axios   //引入vue-axios
并在main.js中引入

```js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(ElementUI);
Vue.use(VueAxios, axios)

在src下面创建request文件夹，并在request文件夹里面创建http.js 和api.js
http.js

import axios from 'axios' // 引入axios
import {Message} from 'element-ui'
import router from '../router'

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'http://www.vicor.com';} 
else if (process.env.NODE_ENV == 'debug') {    
   axios.defaults.baseURL = 'http://www.vicor.com';
} 
else if (process.env.NODE_ENV == 'production') {    
  axios.defaults.baseURL = 'http://www.vicor.com';
}
//设置默认的请求超时时间
axios.defaults.timeout = 10000;

//设置post的请求头
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.interceptors.request.use(
    config => {
       let token = sessionStorage.getItem("header");
       if (token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
         config.headers.token = `${token}`;
       }
       return config;
     },
     err => {
       this.$router.push("/login")
       return Promise.reject(err);
     });

     axios.interceptors.response.use(function (response) {
        if (response.status >= 400) {
        sessionStorage.clear();// 删除已经失效或过期的token（不删除也可以，因为登录后覆盖）
        router.replace({
              path: '/login', // 到登录页重新获取token
              query: { 
                //回到当前页面
            redirect: router.currentRoute.fullPath 
                } 
            })
          }
      return response
    
    }, function (error) {
          if (error.response) {
            if(error.response.status===403){
                  Message({
                    showClose: true,
                    message: '登录过期',
                    type: 'error'
                 });
            sessionStorage.clear();
            // Cookies.set("user","",-10);
            router.replace({
              path: '/login' // 到登录页重新获取token
            })
        }else if(error.response.status===405){
          Message({
            showClose: true,
            message: '权限不足,请联系管理员',
            type: 'warning'
            });
            router.replace({
                  path: '/error', 
            })
        }else if(error.response.status===500){
              Message({
                showClose: true,
                message: '服务器异常',
                type: 'error'
                });
              }
        }
      return Promise.reject(error)
    })
    /** 
 * post方法，对应post请求 
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}
/**
 * get方法，对应get请求
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    });
}

``
在api.js中

import {  post } from './http'
export const Login = p => post('/index.php/admin/login', p);

在页面中

<el-button @click="login()">默认按钮</el-button>

<script>
import { Login } from "@/request/api"
// import axios from 'axios'
export default {
  name:"About",
  data(){
		return{
			message:{
			username: 'admin',
           password: '123456'
      }
		}

  },
  methods:{
         login(){
			Login(this.message).then(res=>{
				console.log(res)
			})
  },
  },
  mounted(){
  //axios直接使用
  //   axios.post('http://www.vicor.com/index.php/admin/login', {
  //  username: 'admin',
  //       password: '123456'
  // })
  // .then(function (response) {
  //   console.log(response);
  // })
  // .catch(function (error) {
  //   console.log(error);
  // })
  }
}
</script>