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": {}
    }
}