请求头

两种常见的请求头,对应不同的请求正文格式

Content-Type: application/json; charset=UTF-8
Request Payload

Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Form Date

Jquery的请求默认为application/x-www-form-urlencoded,而axios的请求默认为application/json; charset=UTF-8

Jquery

$.post('XXX', {
      actionId: 123
    }, function (result) {
      XXXXXX
}).fail(function () {
      XXXXXX
});
$.get("url", {
      data: value
    },function (data, status, jqxhr) {
      XXXXXX
}).fail(function () {
      XXXXXX
});

为 application/json; 时，Jquery的请求需要修改

        $.ajax({
             type: "POST",
             url: "XXX",
             contentType: "application/json; charset=utf-8",
             data: JSON.stringify({
                 'actionId': 123
             }),
              success: function (message) {
                    XXXXXX
              },
              error: function (message) {
                    XXXXXX
              }
         })

Axios

为application/x-www-form-urlencoded时,需改变Content-Type,并为入参添加请求拦截器

import qs from 'qs';//qs会将入参转为如name=xxx&age=xxx的格式
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';  
axios.interceptors.request.use((config) => {
    //在发送请求之前做某件事
    if (config.method === 'post') {
        config.data = qs.stringify(config.data);
    }
    return config;
}, (error) => {
    console.log('错误的传参')
    return Promise.reject(error);
});

Jquery统一设置错误处理

$.ajaxSetup({  
        type: "POST",  
        error: function(jqXHR, textStatus, errorThrown){  
            switch (jqXHR.status){  
                case(500):  
                    alert("服务器系统内部错误");  
                    break;  
                case(401):  
                    alert("未登录");  
                    break;  
                case(403):  
                    alert("无权限执行此操作");  
                    break;  
                case(408):  
                    alert("请求超时");  
                    break;  
                default:  
                    alert("未知错误");  
            }  
        },   
        success: function(data){  
            alert("操作成功");  
        }  
    });  

Axios统一设置错误处理(添加响应拦截器)

import router from './router';
import vm from './main';//vm为对Vue实例的引用
axios.interceptors.response.use((res) => {
    if (!res.data.success) {
        return Promise.resolve(res);
    }
    return res;
}, (error) => {
    if (error.response) {
        vm.showTip(error.response.statusText, 3000);
        vm.hideLoading();
    } else {//网络异常,没有拿到服务器返回值
        router.push({ path: 'error' });//跳向提示无网络的页面
    }
    return Promise.reject(error);
});