【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);
            });