您的位置:首页> 日志> 前端技术 正文
DTOP

axios引入和post请求的封装

luosi | 2020年07月02日 |

>>收藏本文 已有 0条评论

axios的安装

npm install axios

 

axios 的引用

import axios from 'axios'
import { Alertfrom 'vux'
import {storefrom '@/store/store'
import {formatDatefrom '@/utils/common'
import md5 from 'js-md5';
import {BASE_encryptStringfrom "@/utils/config"

 

axios的设置 封装

第一步:设置默认配置

// axios 配置
axios.defaults.timeout = 20000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.baseURL = '';

 

第二步:设置token和序列号传入参数

//加密
function retMd5(userId,timestamp){
    let str =userId+timestamp+BASE_encryptString;
    return md5(str).toUpperCase();
};


//POST传参序列化
axios.interceptors.request.use(
    config => {
        let userId="***";//用户ID
        let timestamp = formatDate(new Date(),'yyyyMMddHHmmss'); //获取当前时间戳
        let token=retMd5(userId,timestamp);//加密
        Vue.set(config.data'token',token);//所有接口统一设置token字段和传入加密内容
        config.data = JSON.stringify(config.data);//序列化
        return config;
    },
    error => {
        console.log("错误的传参");
        return Promise.reject(error);
    }
);

 

第三步:设置拦截和状态判断提示

//返回状态判断
axios.interceptors.response.use(
    response => {
        console.log("返回内容:")
        console.log(response)
        if(response.data.TimeOutFlag){
            console.log('超时了');
            Vue.$vux.loading.hide();//隐藏转圈
            Vue.$vux.alert.show({content: "请求超时!"});
        }
        else if (response.data.status ==200) {
            console.log("返回状态:")
            console.log(response)
            return Promise.reject(response);
        }
        return response;
    }, 
    error => {
        console.log("错误信息",error);
        //从服务器没有请求到数据(网络层失败)
        if(error.response){
            let _response = error.response;
            console.log("未超时信息:",_response);
            let _message = null;
            //console.log("网络异常");
            switch (_response.status) {
                case 404:
                    _message = '404,错误请求';
                    break
                case 403:
                    _message = '禁止访问';
                    break
                case 408:
                    _message = '请求超时';
                    break
                case 500:
                    _message = '服务器内部错误';
                    break
                case 501:
                    _message = '功能未实现';
                    break
                case 503:
                    _message = '服务不可用';
                    break
                case 504:
                    _message = '网关错误';
                    break
                default:
                    _message = '未知错误';
            };
            console.log("返回状态")
            console.log(_message);
            Vue.$vux.loading.hide();
            Vue.$vux.alert.show({content: _message,});
        }
        else{
            if(!window.navigator.onLine){
                Vue.$vux.loading.hide();
                Vue.$vux.alert.show({content: "很抱歉,网络连接已断开,请联网后再试!",})
            }
            else{
                console.log('超时了');
                Vue.$vux.loading.hide();//隐藏转圈
                Vue.$vux.alert.show({content: "请求超时!"});
            }
        }
        return Promise.reject(error);
    }
);

 

第四步:封装和导出

function fetchPost(urlparams={}) {
    return new Promise((resolve,reject=> {
        axios.post(url,params)
        .then(response => {
            console.log("正确返回")
            resolve(response);
        })
        .catch(error =>{
            console.log("错误返回")
            reject(error)
        })
    })
};


export {
    fetchPost
}