vue中axios的应用及拦截封装

一、概述

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特征：

1、从浏览器中创建XMLHttpRequests

2、从 node.js 创建http请求

3、支持PromiseAPI

4、支持拦截请求和响应

5、支持转换请求数据和响应数据

6、可以取消请求

7、自动转换 JSON 数据

8、客户端支持防御XSRF

二、IE兼容性

axios是基于 promise，而promise对IE不支持，所以在进行axios使用之前，需要对IE做兼容性处理。这里主要使用到'babel-polyfill'。

使用npm进行安装，npm install babel-polyfill --save

在main.js中导入。

import 'babel-polyfill'

这样它将会把ES6代码转为ES5代码，从而可以在现有环境执行。因此我们可以用ES6编写，而不用考虑环境支持的问题。

三、axios拦截

1、npm安装axios

     npm install axios --save

2、搭建结构 ，src文件下建立axios文件夹，并在axios下建立Api.js和Http.js。

3、Http.js中进行axios拦截封装完整代码。

import axios from 'axios';

import {Message} from 'element-ui'

function errorLog(err){
    Message({
        message:err.message,
        type:'error',
        duration:3000
    })
}

// 请求超时时间
axios.defaults.timeout = 10000;
// 允许携带cookie
axios.defaults.withCredentials = true;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 请求拦截器
axios.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        const token = localStorage.getItem("token");
        token && (config.headers.Authorization = "Bearer "+token);
        return config;
    },
    error => {
        return Promise.error(error);
    });

// response拦截器
axios.interceptors.response.use(
    response => {
        if (response) {
            switch (response.data.code) {
                case '200':
                    break;
                case '-1':
                    Message.error({
                        message: '请求失败'
                    });
                    break;
            }
        }
        return response;
    },

    error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '请求错误';
                    break;
                case 401: {
                    error.message = '未授权，请登录';
                    router.replace({
                        path: 'login',
                        query: {
                            redirect: router.currentRoute.path
                        },
                    });
                    // window.location.reload()
                    break
                }
                case 403:
                    error.message = '没有权限，拒绝访问';
                    break;
                case 404:
                    error.message = `请求地址出错`;
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器内部错误';
                    break;
                case 501:
                    error.message = '服务未实现';
                    break;
                case 502:
                    error.message = '网关错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网关超时';
                    break;
                case 505:
                    error.message = 'HTTP版本不受支持';
                    break;
                default:
                    break
            }
        }
        errorLog(error);
        return Promise.reject(error)
    }
);
export default axios;

4、main.js中全局引入使用

import './axios/Http.js';

5、api.js里调用axios进行数据请求

import axios from 'axios';

let base = 'URL';   //后端API地址

export const modbusAutoGroups = params => { return axios.get(`${base}/api/asset/disease`, {params:params}).then(res => res.data)};

6、组件中调用接口

import {modbusAutoGroups} from '../axios/Api';

 modbusAutoGroups().then(res => {
      console.log(res)
  });