个人技术总结---使用Axios进行前后端数据交互

222000310刘鑫悦 学生 2023-06-06 22:22:47
这个作业属于哪个课程<2023年福大-软件工程实践-W班>
这个作业要求在哪里<软件工程实践总结&个人技术博客>
这个作业的目标1.课程回顾与总结
2.个人技术总结
其他参考文献《构建之法》

目录

  • 一、技术概述
  • 1.1 何时使用
  • 1.2 学习原因
  • 1.3 技术难点
  • 二、技术详述
  • 2.1 axios安装与导入
  • 2.2 axios基本使用
  • 2.2.0 简单介绍
  • 2.2.1 axios(config)使用
  • 2.2.2 axios.get(url[, config])使用
  • 2.2.3 axios.post(url[, data[, config]])使用
  • 2.3 请求配置参数(config)详解
  • 2.4 响应结构
  • 2.5 axios执行流程
  • 三、技术使用中遇到的问题和解决过程
  • 3.1 如何进行统一配置管理
  • 3.2 如何发送非json数据
  • 四、总结
  • 五、参考文献

一、技术概述

1.1 何时使用

前后端对接时通过axios向服务器发送请求获取响应数据

1.2 学习原因

axios对原生XMLHttpRequests进行了封装, 易于上手, 是一款前端热门请求框架

1.3 技术难点

根据后端接口接受参数不同, 请求配置具有多样化的特点

二、技术详述

2.1 axios安装与导入

根据官方文档, axios支持多种安装方式

// 使用 npm:
npm install axios

// 使用 bower:
bower install axios

// 使用 yarn:
yarn add axios

// 使用 jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

// 使用 unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

/*为了在CommonJS中使用 require() 导入时获得TypeScript类型推断(智能感知|自动完成),请使用以下方法:*/
const axios = require('axios').default;

2.2 axios基本使用

2.2.0 简单介绍

axios通过调用相关方法, 发送ajax请求, 其方法返回通常为promise对象, 通常来说都是在then方法中进行响应处理, 在catch方法中进行异常处理
axios常用请求方法如下:
axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

其中 config为配置对象, url为请求地址, data为请求携带数据
注意: 在使用别名方法时, url、method、data 这些属性都不必在config中指定。

下面将对其中几个方法做详细介绍, 其他方法大同小异(ps: axios.request(config)与axios(config)等价)

2.2.1 axios(config)使用

  • 前端代码
    axios({
        // 未配置method,则默认为get请求
        url: "http://localhost:8081/test/axios",
    })
    .then((res) => {
        console.log(res);
     })
    .catch((err) => {
        console.log(err);
    });
  • 后端代码
    @GetMapping("/axios")
    public String axios() {
        return "use axios(config)";
    }
  • 响应

    在这里插入图片描述

2.2.2 axios.get(url[, config])使用

  • 前端代码
    // 直接在url中传递参数
    axios
        .get("http://localhost:8081/test/get?page=1&pagesize=2")
        .then((res) => {
            console.log(res);
        })
        .catch((err) => {
            console.log(err);
        });
    
    // 使用param配置携带参数, 与上面等价
    axios
        .get("http://localhost:8081/test/get", {
          params: {
            page: 2,
            pagesize: 3,
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
  • 后端代码
    @GetMapping("/get")
    public String get(int page, int pagesize) {
        System.out.println("page:" + page + " pagesize:" + pagesize);
        return "use axios.get()";
    }
  • 响应

    在这里插入图片描述

2.2.3 axios.post(url[, data[, config]])使用

注意: axios发送的data数据默认为JSON数据

发送对象类型json数据

  • 前端代码
    axios
        .post("http://localhost:8081/test/post", {
          name: "liuxinyue",
          age: 18
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
  • 后端代码
    // 其中User具有 String类型的name属性与Integer类型的age属性
    @PostMapping("/post")
    public String post(@RequestBody User user) {
        System.out.println(user);
        return "use axios.post1()";
    }
  • 响应

    在这里插入图片描述

发送字符数组类型json数据

  • 前端代码
    axios
        .post("http://localhost:8081/test/post2", ["liu","xin","yue"])
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
  • 后端代码
    @PostMapping("/post2")
    public String post2(@RequestBody String[] strs) {
        System.out.println(Arrays.toString(strs));
        return "use axios.post2()";
    }
  • 响应

    在这里插入图片描述


    在这里插入图片描述

发送复杂数组类型json数据

  • 前端代码
    axios
        .post("http://localhost:8081/test/post3", [ {
          name: "liu",
          age: 1,
        }, {
          name: "xin",
          age: 3,
        }, {
          name: "yue",
          age: 18,
        }])
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
  • 后端代码
    @PostMapping("/post3")
    public String post2(@RequestBody User[] users) {
        System.out.println(Arrays.toString(users));
        return "use axios.post3()";
    }
  • 响应

    在这里插入图片描述


    在这里插入图片描述

2.3 请求配置参数(config)详解

摘自官网
主要使用的配置项有urlmethodbaseURLheadersparamsdatatimeout

{
  // `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` 指示是否应自动解压缩响应体。
  // 如果设置为' true ',还会从所有解压缩响应的响应对象中删除'content-encoding'标头
  // -仅限节点(XHR不能关闭解压)
  decompress: true // 默认值
}

2.4 响应结构

一个请求的响应包含以下信息。

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写,而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects),
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

// 使用then函数接收
axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
});

2.5 axios执行流程

axios执行流程

三、技术使用中遇到的问题和解决过程

3.1 如何进行统一配置管理

  • 问题描述: 当我们在实际开发中时, 由于服务器的域名与端口以及部分请求路径前缀是保持不变的, 重复的URL编写会令人乏味, 并且如果公司需要修改前缀路径时, 又要进行大刀阔斧的代码修改。与此同时,不同的请求可能会有不同的配置要求,这些请求配置又可以分成多组,如何进行有效管理呢?

  • 解决过程
    方法1: 指定axios默认配置,它将作用于每个请求

    // 全局 axios 默认值
    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    

    方法2: 创建多个axios实例, 进行不同的自定义配置, 使用axios.create([config])来创建axios实例, 每个axios实例都可以用2.2.0中介绍的相关方法发送请求, 如:

    const instance = axios.create({
          baseURL: "http://localhost:8081/test/",
          timeout: 1000,
      });
      // 创建实例后修改默认值
    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    instance
          .get("/get", {
            params: {
              page: 2,
              pagesize: 3,
            },
          })
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
    

    注意: 配置的优先级

// 配置将会按优先级进行合并。它的顺序是:在lib/defaults.js中找到的库默认值
// 然后是实例的 defaults 属性,最后是请求的 config 参数。
// 后面的优先级要高于前面的。

// 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();

// 重写库的超时默认值
// 现在,所有使用此实例的请求都将等待2.5秒,然后才会超时
instance.defaults.timeout = 2500;

// 重写此请求的超时时间,因为该请求需要很长时间
instance.get('/longRequest', {
  timeout: 5000
});

3.2 如何发送非json数据

  • 问题描述: 默认情况下,axios将JavaScript对象序列化为JSON。如果后端接收的为表单数据,则需要以application/x-www-form-urlencoded格式发送数据

  • 解决过程
    方法1: 在浏览器中,可以使用URLSearchParams API(不是所有的浏览器都支持URLSearchParams)

    const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/foo', params);
    

    方法2: 使用qs 库编码数据

    const qs = require('qs');
    axios.post('/foo', qs.stringify({ 'bar': 123 }));
    
    // 或使用es6语法导入
    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);
    

    方法3: 在 node.js, 您可以使用 form-data 库

    const FormData = require('form-data');
     
    const form = new FormData();
    form.append('my_field', 'my value');
    form.append('my_buffer', new Buffer(10));
    form.append('my_file', fs.createReadStream('/foo/bar.jpg'));
    
    axios.post('https://example.com', form, { headers: form.getHeaders() })
    

    方法4: 使用拦截器

    axios.interceptors.request.use(config => {
            if (config.data instanceof FormData) {
              Object.assign(config.headers, config.data.getHeaders());
            }
            return config;
    });
    

四、总结

Axios是一个基于 promise 网络请求库,作用于node.js 和浏览器中。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。使用axios能够进行快速简单的发送请求并处理响应结果, 使用axios你可以进行:

  1. 支持不同类型的请求发送(如get、post、delete)
  2. 支持并发发送多个请求,并集中处理响应结果
  3. 能够自定义拦截器,方便程序员对请求或响应做出处理
  4. axios基于promise,所以支持async/await语法
  5. 能够对不同的请求配置做出对应集中管理

五、参考文献

1. axios基本使用及封装
2. axios中文文档

...全文
227 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

686

社区成员

发帖
与我相关
我的任务
社区描述
2023年福州大学软件工程实践课程W班的教学社区
软件工程团队开发软件构建 高校 福建省·福州市
社区管理员
  • FZU_SE_teacherW
  • aboutazhang
  • 郭渊伟
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧