异步查询工具axios的简单应用

1 什么是axios

axios是基于Vue的ajax的请求框架，基于promise的HTTP库。

axios语法：

axios.get(url,{}).then(成功).catch(失败)
axios.post(url,{}).then(成功).catch(失败)

官方文档：

2 axios全局配置

注：axios的使用需基于Vue环境

Xxx.js

import Vue from 'vue'//从vue中引入Vue
Vue.use(Axios)//使用Axios
// 引用axios，并设置基础URL为后端服务api地址
Axios.defaults.baseURL = 'http://127.0.0.1:9527/services'  //对应后端网关统一地址
// 将API方法绑定到全局  /plat/login
Vue.prototype.$http = Axios
Vue.config.productionTip = false

3 Axios的应用

登录验证参考代码

Main.js

import babelpolyfill from 'babel-polyfill'
import Vue from 'vue'
import Axios from 'axios/dist/axios'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
//import './assets/theme/theme-green/index.css'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
//import NProgress from 'nprogress'
//import 'nprogress/nprogress.css'
import routes from './routes'
// import Mock from './mock'
// Mock.bootstrap();
import 'font-awesome/css/font-awesome.min.css'

Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)

Vue.use(Axios)
//网关地址
Axios.defaults.baseURL = 'http://localhost:9527/crazytrend'
Vue.prototype.$http = Axios
Vue.config.productionTip = false

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  //NProgress.start();
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  }
  let user = JSON.parse(sessionStorage.getItem('user'));
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

//router.afterEach(transition => {
//NProgress.done();
//});

new Vue({
  //el: '#app',
  //template: '<App/>',
  router,
  store,
  //components: { App }
  render: h => h(App)
}).$mount('#app')

Login.vue

<script>
    import {requestLogin} from '../api/api';
    //import NProgress from 'nprogress'
    export default {
        data() {
            return {
                logining: false,
                ruleForm2: {
                    account: 'admin',
                    checkPass: '123456'
                },
                rules2: {
                    account: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        //{ validator: validaePass }
                    ],
                    checkPass: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        //{ validator: validaePass2 }
                    ]
                },
                checked: true
            };
        },
        methods: {
            handleReset2() {
                this.$refs.ruleForm2.resetFields();
            },
            handleSubmit2(ev) {
                var _this = this;
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        //_this.$router.replace('/table');
                        this.logining = true;
                        //NProgress.start();
                        var loginParams = {name: this.ruleForm2.account, pwd: this.ruleForm2.checkPass};
                        //使用axios发送请求
                        /* this.$http.get("/147258").then(data =>{
                             console.debug("iiiiiii")
                             console.debug(data)
                         });*/
                        this.$http.post("/user/user/login").then(d => {

                            this.logining = false;
                            //NProgress.done();
                            console.debug("===============");

                            var data = d.data.data;
                            console.debug(data);
                            let {msg, success, object} = data;
                            if (!success) {
                                this.$message({
                                    message: msg,
                                    type: 'error'
                                });
                            } else {
                                //session放入用户中
                                object = {"name":"kobe"};
                                sessionStorage.setItem('user', JSON.stringify(object));
                                this.$router.push({path: '/table'});
                            }
                        });
                        /* requestLogin(loginParams).then(data => {
                           this.logining = false;
                           //NProgress.done();
                           let { msg, code, user } = data;
                           if (code !== 200) {
                             this.$message({
                               message: msg,
                               type: 'error'
                             });
                           } else {
                             sessionStorage.setItem('user', JSON.stringify(user));
                             this.$router.push({ path: '/table' });
                           }
                         });*/
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }

</script>