IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    axios封装,让代码结构更加的完善

    JayHrn发表于 2023-12-19 09:35:28
    love 0

    Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
    关于更多的介绍,我们可以查看官网

    引用站外地址
    Axios中文文档
    Axios

    安装

    关于使用,对于不同的项目使用方式不同,这里以npm介绍,更多安装方式可以查看 Axios 中文文档

    1
    npm install axios

    使用

    对于使用我们有许多的方式,可以直接发起请求,这里我们不做介绍,我们主要是考虑如何封装。

    在vue项目中,我们新建一个文件夹,命名为utils,以后所有的工具类都可以放在下面(我们可以把axios认为是请求数的一种工具),位置在src路径下。

    新建一个js文件,可以命名为request.js或者axios.js,这里我们以axios.js命名。填写如下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    /**
    * @Author: JayHrn
    * axios封装基本配置
    */
    import axios from 'axios'

    // 创建axios实例
    const service = axios.create({
    baseURL: 'http://localhost:9090', // api的base_url
    timeout: 5000, // 请求超时时间
    })

    // 请求拦截
    service.interceptors.request.use(config => {
    //拦截操作
    return config //必须返回回去 否则调用处取不到
    }, err => {
    console.log(err)
    })
    // 响应拦截
    service.interceptors.response.use(response => {
    //拦截操作
    return response.data
    }, error => {
    return Promise.reject(error)
    })

    export default service;

    创建实例

    观察如上代码,我们可以看到创建了一个axios的实例

    1
    2
    3
    4
    const service = axios.create({
    baseURL: 'http://localhost:9090', // api的base_url
    timeout: 5000, // 请求超时时间
    })

    这里这样的好处是不用每次请求都是创建一个axios实例。并且里面我们可以配置一些参数,如下是官网的示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    {
    // `url` 是用于请求的服务器 URL
    url: '/user',

    // `method` 是创建请求时使用的方法
    method: 'get', // 默认值

    // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    baseURL: 'https://some-domain.com/api/',

    // `transformRequest` 允许在向服务器发送前,修改请求数据
    // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    // 数组中最后一个函数必须返回一个字符串, 一个Buffer实例,ArrayBuffer,FormData,或 Stream
    // 你可以修改请求头。
    transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理

    return data;
    }],

    // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
    transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理

    return data;
    }],

    // 自定义请求头
    headers: {'X-Requested-With': 'XMLHttpRequest'},

    // `params` 是与请求一起发送的 URL 参数
    // 必须是一个简单对象或 URLSearchParams 对象
    params: {
    ID: 12345
    },

    // `paramsSerializer`是可选方法,主要用于序列化`params`
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
    },

    // `data` 是作为请求体被发送的数据
    // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
    // 在没有设置 `transformRequest` 时,则必须是以下类型之一:
    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    // - 浏览器专属: FormData, File, Blob
    // - Node 专属: Stream, Buffer
    data: {
    firstName: 'Fred'
    },

    // 发送请求体数据的可选语法
    // 请求方式 post
    // 只有 value 会被发送,key 则不会
    data: 'Country=Brasil&City=Belo Horizonte',

    // `timeout` 指定请求超时的毫秒数。
    // 如果请求时间超过 `timeout` 的值,则请求会被中断
    timeout: 1000, // 默认值是 `0` (永不超时)

    // `withCredentials` 表示跨域请求时是否需要使用凭证
    withCredentials: false, // default

    // `adapter` 允许自定义处理请求,这使测试更加容易。
    // 返回一个 promise 并提供一个有效的响应 (参见 lib/adapters/README.md)。
    adapter: function (config) {
    /* ... */
    },

    // `auth` HTTP Basic Auth
    auth: {
    username: 'janedoe',
    password: 's00pers3cret'
    },

    // `responseType` 表示浏览器将要响应的数据类型
    // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
    // 浏览器专属:'blob'
    responseType: 'json', // 默认值

    // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
    // 注意:忽略 `responseType` 的值为 'stream',或者是客户端请求
    // Note: Ignored for `responseType` of 'stream' or client-side requests
    responseEncoding: 'utf8', // 默认值

    // `xsrfCookieName` 是 xsrf token 的值,被用作 cookie 的名称
    xsrfCookieName: 'XSRF-TOKEN', // 默认值

    // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
    xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值

    // `onUploadProgress` 允许为上传处理进度事件
    // 浏览器专属
    onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
    },

    // `onDownloadProgress` 允许为下载处理进度事件
    // 浏览器专属
    onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
    },

    // `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
    maxContentLength: 2000,

    // `maxBodyLength`(仅Node)定义允许的http请求内容的最大字节数
    maxBodyLength: 2000,

    // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
    // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),
    // 则promise 将会 resolved,否则是 rejected。
    validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认值
    },

    // `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
    // 如果设置为0,则不会进行重定向
    maxRedirects: 5, // 默认值

    // `socketPath` 定义了在node.js中使用的UNIX套接字。
    // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
    // 只能指定 `socketPath` 或 `proxy` 。
    // 若都指定,这使用 `socketPath` 。
    socketPath: null, // default

    // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
    // and https requests, respectively, in node.js. This allows options to be added like
    // `keepAlive` that are not enabled by default.
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),

    // `proxy` 定义了代理服务器的主机名,端口和协议。
    // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
    // 使用 `false` 可以禁用代理功能,同时环境变量也会被忽略。
    // `auth`表示应使用HTTP Basic auth连接到代理,并且提供凭据。
    // 这将设置一个 `Proxy-Authorization` 请求头,它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
    // 如果代理服务器使用 HTTPS,则必须设置 protocol 为`https`
    proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
    username: 'mikeymike',
    password: 'rapunz3l'
    }
    },

    // see https://axios-http.com/zh/docs/cancellation
    cancelToken: new CancelToken(function (cancel) {
    }),

    // `decompress` indicates whether or not the response body should be decompressed
    // automatically. If set to `true` will also remove the 'content-encoding' header
    // from the responses objects of all decompressed responses
    // - Node only (XHR cannot turn off decompression)
    decompress: true // 默认值

    }

    主要使用到的还是配置baseURL,headers,timeout等。

    请求拦截

    在请求之前,我们可以进行一些配置

    1
    2
    3
    4
    5
    6
    service.interceptors.request.use(config => {
    //拦截操作,在发送请求之前做些什么
    return config //必须返回回去 否则调用处取不到
    }, err => {
    console.log(err)
    })

    具体的配置自行决定

    响应拦截

    该部分主要是对请求之后的结果进行处理,例如登录拦截等可能会使用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    service.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
    }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
    });

    使用Axios

    为了规范以及方便阅读请求接口,我们一般会在src文件夹下面创建一个api文件夹用来存储所有的请求函数。

    例如创建一个plane.js文件,来获取所有的飞机数据

    1
    2
    3
    4
    5
    6
    7
    import request from "@/utils/axios";
    export const getAllPlane= () =>{
    return request({
    method: "GET",
    url: '/plane/list',
    })
    }

    首先需要引入axios实例,然后配置请求。这里的请求方式为GET,url为/plane/list,最终请求的路径会加上之前配置的,最终表现为http://localhost:9090/plane/list。这里将这些函数对外暴露,最终在你需要使用的页面进行使用即可。

    使用函数

    Axios是支持async/await用法的,这里我们进行示例

    在vue页面的methods中引入如下函数

    1
    2
    3
    4
    5
    6
    7
    8
    async get() {
    const res = await getAllPlane();
    if (res.code === 200) { // 表示请求成功,也可以直接在拦截器那里进行处理
    console.log(res.data)
    } else {
    console.log(res.msg)
    }
    }

    这里res将会获取到请求的结果。



沪ICP备19023445号-2号
友情链接