axios使用笔记

最新推荐文章于 2023-09-20 15:48:24 发布

转载最新推荐文章于 2023-09-20 15:48:24 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cbb284c51882532525a1073

文章标签：

#前端 #后端 #javascript #ViewUI

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特点：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

我在做Spring Boot+Vue前后端分离项目的时候，是使用了这个库进行的前后端对接。
这个东西很简单，它的使用说明文档也很短小精悍，而我在这也不是想把它全部介绍一遍，只是记下我在项目中使用到的部分。

使用文档链接

安装有三种途径：

$ npm install axios
复制代码

bower

$ bower install axios
复制代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
复制代码

request和response

request

前端向后端发送请求

axios提供了所有它所支持的请求方法的别名，可以直接用，诸如：
axios.get(url[, config])
axios.post(url[, data[, config]])
。。。。。。
参数可以不用指定，但我在这使用了axios提供的接口 axios(config)，自己定义了配置

export const postKeyValueRequest = (url, params) => {
  return axios({

    // `method` 是创建请求时使用的方法
    method: 'post',

    // `url` 是用于请求的服务器 URL
    url: `${base}${url}`,

    // `data` 是作为请求主体被发送的数据
    data: params,

    // `transformRequest` 允许在向服务器发送前，修改请求数据，只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法，后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],

    // `headers` 是即将被发送的自定义请求头
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
复制代码

=> 是箭头函数，不了解的可以点击链接

我自己的请求到此就配置好了一个，之后可以配置多个方法进行调用。不过请求的配置还有许多属性，有需求的可以自己去看看

response

前端接收后端响应的请求

一个response的相应数据结构如下：

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

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

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

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}
复制代码

可以通过then或catch接收，写法如下：

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
  });
复制代码

拦截器

拦截器在request发送前，还有response接受前拦截，语法如下：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
复制代码

转载于:https://juejin.im/post/5cbb284c51882532525a1073