Axiso库

官方介绍：

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

axios官方文档：https://www.axios-http.cn/docs/intro

更新

2024.5.24 第一次更新，主要学习了一下Axiso的基本用法

功能特点

在浏览器中发送XMLHttpRequest请求

避免了兼容性问题,fech是存在兼容性问题的
在node.js中发送http请求

不需要关心在不同的环境用不同的API，axiso会自动识别环境，在不同的环境下用的都是同一个API
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
超时处理
查询参数序列化支持嵌套项处理
自动将请求体序列化为：
- JSON (application/json)
- Multipart / FormData (multipart/form-data)
- URL encoded form (application/x-www-form-urlencoded)
将 HTML Form 转换成 JSON 进行请求
自动转换JSON数据
获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
为 node.js 设置带宽限制

安装

npm install axios

在需要使用的js文件中引入axios

import axios from ‘axios’

axios请求方法

config请求配置

url： url 是用于请求的服务器 URL
1
url: '/user',
method：method 是创建请求时使用的方法
1
method: 'get', // 默认值

baseURL： baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。
它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL

1
2
3

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

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

return data;
}],

transformResponse：transformResponse 在传递给 then/catch 前，允许修改响应数据

transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理
    return data;
  }],

自定义请求头

1	headers: {'X-Requested-With': 'XMLHttpRequest'},

params：params 是与请求一起发送的 URL 参数，必须是一个简单对象或 URLSearchParams 对象
1
2
3
params: {
ID: 12345
}

paramsSerializer：paramsSerializer是可选方法，主要用于序列化params

1
2
3

paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

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

1
2
3

data: {
  firstName: 'Fred'
},

timeout：timeout 指定请求超时的毫秒数。

1 2	// 如果请求时间超过 `timeout` 的值，则请求会被中断 timeout: 1000, // 默认值是 `0` (永不超时)

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

adapter：adapter 允许自定义处理请求，这使测试更加容易。

//返回一个 promise 并提供一个有效的响应
adapter: function (config) {
  /* ... */
},

responseEncoding：responseEncoding 表示用于解码响应的编码 (Node.js 专属)

注意：忽略 responseType 的值为 ‘stream’，或者是客户端请求

1	responseEncoding: 'utf8', // 默认值

更多参数，查询：https://www.axios-http.cn/docs/req_config

axios

axios(config)

axios(config)——post请求

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios(config)——get请求

// 在 node.js 用GET请求获取远程图片
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

axios(url[, config])

1 2	// 发起一个 GET 请求 (默认请求方式) axios('/user/12345');

微弱的光

Axios学习

Axiso库

更新

功能特点

安装

在需要使用的js文件中引入axios

axios请求方法

config请求配置

axios

axios(config)——post请求

axios(config)——get请求

axios(url[, 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]])

axios.postForm(url[, data[, config]])

axios.putForm(url[, data[, config]])

axios.patchForm(url[, data[, config]])

常用的两个

axios.get

axios.post