vue 之 axios封装

/*
1. 统一处理请求异常
2. 异步请求成功的数据不是response, 而是response.data
3. 对post请求参数进行ulencode处理, 而不使用默认的json方式(后台接口不支持)
4. 配置请求超时的时间
5. 通过请求头携带token数据
*/

import axios from "axios";
import qs from "qs";
import Md5 from 'md5'


axios.defaults.timeout = 5000; // 请求超时，适当修改
// 添加请求拦截器，通过这个，我们就可以把Cookie传到后台
axios.interceptors.request.use(
    (config) => {
        if (config.method == "post") {
            config.headers = {
                "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
                "Uxb-User-Agent": "webVersion:v1.0.0" 
            }
            config.data.siteid = 42
            config.data.stime = parseInt(new Date().getTime() / 1000)
            
        } else {
            config.headers = {
                "Content-Type": "application/json; charset=utf-8",
                "Uxb-User-Agent": "webVersion:v1.0.0",
            };
            config.params.siteid = 42
            config.params.stime = parseInt(new Date().getTime() / 1000)
        
        }

        config.data = qs.stringify(config.data);


       

        return config;
    },
    (err) => {
        return Promise.reject(err);
    }
);
import Vue from 'vue'
// 添加响应拦截器
axios.interceptors.response.use(
    (response) => {
        // tryHideFullScreenLoading();
            if (response.data.code !== 0) {
            // alertmsg(response.data.message, "error");
            Vue.prototype.$message (response.data.message)
        }
        return response;
    },
    (error) => {
        // tryHideFullScreenLoading();
        return Promise.reject(error.response);
    }
);
export default axios;
/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function get(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: data,
            })
            .then((response) => {
                resolve(response.data);
            })
            .catch((err) => {
                reject(err);
            });
    });
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data).then(
            (response) => {
                resolve(response.data);
            },
            (err) => {
                reject(err);
            }
        );
    });
}

main.js引入

import axios from './api/index.js'
Vue.prototype.$axios = axios

组件引用

import {get,post} from '@/api/index'