axios 學習

axios 什麼狀況下配置纔會有預請求？

• axios 什麼狀況下配置纔會有預請求？（先 options，而後纔是 get/post,實際上是 CORS 規定的要求，具體見這裏）

  只要在請求頭中添加了自定義字段，就會自動發起 option 請求，不論是 axios 直接設置，仍是經過 axios 實例來配置；

  axios.defaults.headers.authwangkai = "123"
  instance.defaults.headers.authwangkai = "123"

• 還有一篇比較好的文章,這篇文章分析認爲 有預請求 消耗資源；

request 數據格式

• 正常請求數據格式

{
    "transformRequest": {},
    "transformResponse": {},
    "timeout": 5000,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "headers": {
        "common": {
            "Accept": "application/json, text/plain, */*"
        },
        "delete": {},
        "get": {},
        "head": {},
        "post": {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        },
        "put": {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        "patch": {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    },
    "method": "get",
    "baseURL": "https://www.baidu.com",
    "url": "/user/users/show-reset-password"
}

response 數據格式

• 返回的正常數據格式

{
    "data": {
        "message": "success",
        "code": 0,
        "status_code": 200,
        "data": {
            "vcode_key": "2da1536154b44a9950a2be8fdeccdef1"
        }
    },
    "status": 200,
    "statusText": "",
    "headers": {
        "content-type": "application/json",
        "cache-control": "no-cache, no-store, private"
    },
    "config": {
        "transformRequest": {},
        "transformResponse": {},
        "timeout": 5000,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "authwangkai": "123"
        },
        "method": "get",
        "baseURL": "https://www.baidu.com",
        "url": "https://www.baidu.com/test"
    },
    "request": {}
}

• 返回的錯誤處理數據結構

這個 error 直接用 console.log 打印，只是一個報錯，須要使用 JSON.stringify();才能看到

直接打印

Error: Request failed with status code 417
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:18)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:77)

{
    "config": {
        "transformRequest": {},
        "transformResponse": {},
        "timeout": 5000,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "authwangkai": "123"
        },
        "method": "get",
        "baseURL": "https://www.baidu.com",
        "params": {
            "ufrom": "shequn",
            "mobile": "15221299999",
            "type": 1,
            "vcode": "wptnt",
            "vcode_key": "c0b0a1b344a4be16e0913466a447f7c4"
        },
        "url": "https://www.baidu.com/user/users/add-pre-store"
    },
    "request": {},
    "response": {
        "data": {
            "message": "手機號已存在",
            "code": 250020,
            "status_code": 417,
            "debug": {
                "line": 570,
                "file": "/data/UserController.php",
                "class": "App\\Logics\\LogicWithErrorException",
                "trace": []
            }
        },
        "status": 417,
        "statusText": "",
        "headers": {
            "content-type": "application/json",
            "cache-control": "no-cache, private"
        },
        "config": {
            "transformRequest": {},
            "transformResponse": {},
            "timeout": 5000,
            "xsrfCookieName": "XSRF-TOKEN",
            "xsrfHeaderName": "X-XSRF-TOKEN",
            "maxContentLength": -1,
            "headers": {
                "Accept": "application/json, text/plain, */*",
                "authwangkai": "123"
            },
            "method": "get",
            "baseURL": "https://www.baidu.com",
            "params": {
                "ufrom": "shequn",
                "mobile": "*******",
                "type": 1,
                "vcode": "wptnt",
                "vcode_key": "c0b0a1b344a4be16e0913466a447f7c4"
            },
            "url": "https://www.baidu.com/user/users/add-pre-store"
        },
        "request": {}
    }
}