安装axios异步通信（和ajax差不多）

3.1:axios官网

axios官网地址

3.1.2:什么是axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装
它本身具有以下特征：
a.从浏览器中创建 XMLHttpRequest
b.从 node.js 发出 http 请求
c.支持 Promise API
e.拦截请求和响应
f.转换请求和响应数据
g.取消请求
h.自动转换JSON数据

3.1.3:vue安装axios命令

npm install --save axios

3.1.4封装axios并配置全局

首先我们在src下面创建一个utils的目录,然后创建一个js文件

/**
 * 引入通信框架axios
 */
import axios from "axios";
//他设置为true是为了请求发送凭证,例如sesion会话,如果不设置他,可能session取值会为null
axios.defaults.withCredentials = true;


let path = '';     //为什么要定义一个前缀,如果该项目模块做完了傻逼的上司让你在当前模块加个前缀,那么多方法怎么加,所以这个时候就用到用处了,这个叫做不怕一万就怕万一。

/**
 * post请求的axios
 * @param url
 * @param params
 */
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${path}${url}`,
        data: params
    });
}


/**
 * get请求的axios
 * @param url
 * @param params
 */
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${path}${url}`,
        data: params
    });
}


/**
 * put请求的axios
 * @param url
 * @param params
 */
export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${path}${url}`,
        data: params
    });
}

/**
 * delete请求的axios
 * @param url
 * @param params
 */
export const deleteRequest = (url, params) => {
    return axios({
        method: 'delete',
        url: `${path}${url}`,
        data: params
    });
}

配置全局:

我们去main.js配置全局

import {postRequest} from "@/utils/api";
import {getRequest} from "@/utils/api";
import {putRequest} from "@/utils/api";
import {deleteRequest} from "@/utils/api";

Vue.prototype.postRequest = postRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.deleteRequest = deleteRequest; 

这样就可以了。我们在组件中请求后台的时候直接通过this.getRequest('/url',params).then().catch()...即可。非常的方便呢

3.1.5:配置全局的axios响应拦截器和请求拦截器

我们为什么要配置拦截器?

众所周知,拦截器是可以在程序运行输出结果之前进行相应的业务逻辑处理的拦截或增强,提高程序的可行性。
而axios的拦截器,我们主要做的是直接响应后台返回的信息,这个信息可能正确的也可能是错误的,因为我们不可能调用接口之后这个
返回给用户的消息是我们前端来写吧,因为后台返回的就是json格式的数据已经包括了message,而我们只需要将这个mesage响应出来即可。
如果后台给的是成功消息,我们就见这个消息使用element-ui中的mesage组件打印出来即可。如果后台抛出的是异常,我们的消息
打印的就是异常消息。

例如:

失败

怎么样,是不是很方便呢~

3.1.6:具体操作如下

饿了么ui官网地址

首先我们要在vue中引入Element-ui命令

npm i element-ui -S

然后在main中将饿了么挂载到vue

// 引入element-ui组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'   //这个必须引入,这个才是具体的样式文件
//挂载到vue
Vue.use(ElementUI)

3.1.5配置axios的响应拦截器,还在上面的配置axios封装请求中配置,配置内容如下:

/**
 * 响应拦截器,参数success,此参数并不是成功返回,而是成功调到了后端的接口。
 * 调到接口还有两种情况,1:成功,2失败
 */
axios.interceptors.response.use(success => {
    //处理业务逻辑错误  这里设置的是状态
    if (success.status && success.status === 200) {  //说明调到了接口
        if (success.data.code === 500 || success.data.code === 401 || success.data.code === 403) {
            Message.error({message: success.data.message})
            return;
        }
        //如果成功,判断是否有消息
        if (success.data.message) {
            Message.success({message: success.data.message})
        }
    }
    return success.data;
}, error => {
    //接口都没调到
    if (error.response.code === 504 || error.response.code === 404) {
        Message.error({message: '服务器被吃了,( ╯□╰ )'})
    } else if (error.response.code === 401) {
        Message.error({message: '您还尚未登陆,请登录后再试'})         //如果没登陆自动跳到登录页面
        router.replace('/');
    } else if (error.response.code === 403) {
        Message.error({message: '权限不足,请联系管理员!'})
    } else {
        if (error.response.data.message) {
            Message.error({message: error.response.data.message})
        } else {
            Message.error({message: '未知错误!'})
        }
    }
    return;
});

这样我们在发送axios的时候只需要判断resp是否存在即可。例如

onsubmit: function () {
                this.$refs.form.validate((valid) => {
                    this.loading = true;
                    if (valid) {
                        this.loading = false;
                        this.postRequest('/login', this.form).then(resp => {
                            if (resp) {
                            //
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    } else {
                        this.$message.error('请输入所有字段!');
                        return false;
                    }
                })
            },
            resetForm: function () {
                this.$refs.form.resetFields();
                this.$message({
                    message: '清除成功',
                    type: 'success'
                });
            },

3.1.7配置请求拦截器:

/**
 * 请求拦截器
 */
axios.interceptors.request.use(config => {
    if (window.sessionStorage.getItem('tokenStr')) {
        //存放到前端请求响应头里面
        config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr'); //这边是将token存储看具体业务。我这边是springsecurity
    }
    return config;
}, error => {
    console.log(error);
})