Vue开发问题 —— axios二次封装，请求、响应拦截器。

什么是 axios？

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

1，安装

使用 npm

npm install axios

2，创建一个request.js，将下面内容贴到request.js3

import axios from "axios";
import router from "@/router";
// 创建一个 axios 实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    withCredentials: false, // 跨域请求时是否需要使用凭证 default
    timeout: 50000 // timeout` 指定请求超时的毫秒数(0 表示无超时时间) 如果请求话费了超过 `timeout` 的时间，请求将被中断
});

// 添加请求拦截器
service.interceptors.request.use(
    config => {
        /**
         * 判断用户token信息是否存在,这里用到了localStorage
         */
        const token = localStorage.getItem('token');
        if (token) {
            // `headers` 是即将被发送的自定义请求头
            config.headers["x-auth-token"] = token; //配置请求头信息
        }
        // 在发送请求之前做些什么
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
service.interceptors.response.use(
    response => {
        if (
            response.config &&
            response.headers["content-type"] === "application/json" &&
            response.status === 200
        ) {
            return;
        }
        let data = response.data;
        if (!data) {
            window.location.reload();
        }
        if (data.status == "200") {
            return data.body;
        }
        if (data.status == "401" || data.status == 401) {
            //登录超时，清除用户信息，跳转到登录页
            localStorage.clear();
            router.push({
                name: "login"
            });
            return;
        }
    },
    error => {
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);

export default service;

 3，创建一个api文件夹，下面以登录接口为例

//这里是在login,js文件中
import request from '@/request'
/**
 * 请求方法
 * @param {Object} option (用于axios config 中的参数如:data,params,...)
 * @param {string} id(用于url中需要的参数，url需要多个参数，方法继续加参数即可)
 */
export function login(option) {
    return request({
        url: '/login', //请求url
        method: 'post', //这里方法的类型可以写get,post,put,delete
        ...option  //向后台返回的数据
    })
}

4，页面中运用