【vue开发问题-解决方法】（三）axios拦截器，post请求问题处理，异步请求封装

axios  post请求处理

在vue中使用axios Post请求时会遇到后台接收不到参数问题，查看请求参数格式还是json的数据格式：

而后台需要的数据格式为：key:val格式，所以需要在请求传参之前将数据序列化后再传递到后台：

如果可以引入qs库，然后用qs 将数据做处理。

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

//或者

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

因为我的工程中没有使用node或者webpack一类工具，而是静态CDN引入的，也没找到qs下载包，故使用另一种方法：

在请求之前将data进行序列化，序列化的函数使用jQuery ajax 的param()方法。

 config.data = $.param(config.data);

具体代码在拦截器中

拦截器

axios拦截器，可以统一处理http请求和响应，以及一些其他事件

 //http request拦截器
    axios.interceptors.request.use(
        (config) => {
            // 判断是否存在token，如果存在的话，则每个http header都加上token
            // if (store.getters.accessToken) {
            //     console.log(store.getters.accessToken)
            //     config.headers.Authorization = `token ${store.getters.accessToken}`;
            // }
            //根据接口传入参数显示加载动画
            // showFullScreenLoading();
            
            //解决axios post请求后台获取不到参数问题
            if (config.method === 'post') {
                //添加token判断登录状态
                config.data.TOKEN = store.getters.accessToken;
                config.data = $.param(config.data);  
            };
            
            return config;
        }, function (err) {
            return Promise.reject(err);
        });

    //http response 拦截器
    axios.interceptors.response.use(function (response) {
        //暂停加载动画
        // tryHideFullScreenLoading();
        return response;
    }, function (err) {
        if (err.response) {
            switch (err.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    store.dispatch("logout");
                    router.replace({
                        path: 'Login',
                        query: { redirect: router.history.current.fullPath }
                    })
            }
        }
        return Promise.reject(err);
    });

axios异步请求封装

//app.js中将axios映射到Vue.prototype.$http 中
Vue.prototype.$http = axios;


 const apiUrl = "http://XXX.XXX.XXX.XXX/IplatOA/Ajax.aspx?";

//封装异步调用函数
        _postPromise(ctrl, act, params) {
            let _url = apiUrl;
            return new Promise((resolve, reject) => {
                axios.post(_url, params)
                    .then(res => {
                        resolve(res.data);
                    })
                    .catch(err => {
                        reject(err);
                    })
            });
        },
        _getPromise(url, params) {
            let _url = apiUrl + url;
            return new Promise((resolve, reject) => {
                axios.get(_url, params)
                    .then(res => {
                        resolve(res.data);
                    })
                    .catch(err => {
                        reject(err);
                    })
            });
        },

api函数：

// 登录验证
        login(data) {
            return this._postPromise('authenticationService', 'Login', {
                nameMixed: data.nameMixed,
                password: data.password
            });
        },
// 修改密码
        changePwd(data) {
            return this._postPromise('userService', 'ChangePwd', {
                userId: data.userId,
                oldPwd: data.oldPwd,
                newPwd: data.newPwd
            });
        },

使用时直接调用函数即可

    Api.changePwd(data)
            .then(res => {
                let result = res.Data;
                if (result.status === '1') {
                    console.log('修改密码成功');

                } else {

                    console.log('修改密码失败');
                }
            })
            .catch(err => {
                console.log(err);
            });