您的位置： 首页 >日志>前端技术>详细内容

前端技术

axios引入和post请求的封装

来源：本站原创 发布时间：2020-07-02 15:18:39 浏览次数： 次 【字体：小 大】

axios的安装

npm install axios

 

axios 的引用

import axios from 'axios'
import { Alert} from 'vux'
import {store} from '@/store/store'
import {formatDate} from '@/utils/common'
import md5 from 'js-md5';
import {BASE_encryptString} from "@/utils/config"

 

axios的设置 封装

第一步：设置默认配置

// axios 配置
axios.defaults.timeout = 20000;
axios.defaults.headers.post['Content-Type'] = 'application/x-';
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(url, params={}) {
    return new Promise((resolve,reject) => {
        axios.post(url,params)
        .then(response => {
            console.log("正确返回")
            resolve(response);
        })
        .catch(error =>{
            console.log("错误返回")
            reject(error)
        })
    })
};


export {
    fetchPost
}

 

×

用户登录