NoteZ_技术博客 NoteZ_技术博客
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)

NoteZ_技术博客

前端界的小学生
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)
  • JavaScript笔记

    • ajax如何解决跨域问题
    • async与await语法
    • Axios 文件下载实现进度条功能
    • Axios 的各种请求方式及传参格式总结
      • 使用 npm 安装
      • 使用 cdn 引入
      • 使用案例
        • 执行 GET 请求
        • 执行 POST 请求
        • 执行 DELETE 请求
        • 执行 PUT 请求
        • 执行 PATCH 请求
        • 执行多个并发请求
      • Axios 部分 API
        • 请求方法的别名
        • 请求并发
        • 创建实例
        • 请求配置
        • 响应结构
        • 全局配置的默认值
        • 自定义实例默认值
        • 配置的优先顺序
        • 拦截器
        • 错误处理
        • 取消请求
    • axios简单使用
    • CommonJS与ES6 Module的导入与导出之间的区别
    • ES6 中 export,export default 和 import 区别及用法
    • Javascript - 如何循环遍历getElementsByClassName返回的所有DOM元素
    • JavaScript 实现 charts 缩放比例尺
    • javaScript 实现将文件流下载文件保存到本地
    • JavaScript 数组对象去重方法
    • JavaScript 生成 uuid
    • JavaScript 解析 get 请求 url 参成对象
    • JavaScript判断字符串中是否包含某个字符串
    • JavaScript判断是否为移动端浏览器
    • JavaScript复制内容到剪贴板的两种常用方法
    • JavaScript实现单词首字母大写的方法总汇
    • JavaScript对时间(time)、日期(date)格式转换
    • JavaScript数组去重方法总结
    • JavaScript数组类型(Array)操作方法汇总
    • JavaScript浅度和深度复制的实现方法
    • js 中的 ES5 面向对象
    • js 中的 ES6 面向对象
    • js 中的 new 命令原理
    • js 实现 iframe通信
    • js 实现将文本复制到粘贴板
    • js 异步操作
    • js 数组转为树形(tree)结构
    • js 文件分片上传
    • js 统计数组中元素的重复次数
    • JS 选中文本输入框的部分文本内容
    • js 面向对象总结
    • Js中的forEach()、map()、$.each()和$.map()之间异同
    • js中的多种数组去重性能对比总结
    • js判断移动端还是pc端
    • JS如何监听div的resize事件
    • js实现格式化JSON数据方法
    • js实现防抖与节流函数
    • Js将滚动条(scrollbar)保持在最底部的方法
    • JS异步编程进化之路
    • JS数组改变元素位置(互换、置顶、上移、下移)
    • js数组的简单使用
    • js文件单位大小转换
    • JS获取和修改url参数
    • JS获取浏览器信息
    • js获取浏览器可视区或页面大小的兼容性总结
    • JS读取本地文本文件(兼容各种浏览器)
    • js随机打乱数组
    • Promise 中的 async 与 await 特点
    • Promise封装请求
    • qs.stringify 的基本用法
    • Web worker 使用方法
    • window.open之浏览器新窗口打开
    • 使用 js 实现保存 .tree 文件到本地
    • 使用 JS 将数字转化成千分位
    • 使用 js 快速计算文件 hash 值
    • 使用 js 进行Base64编码、解码(js-base64)
    • 使用 setTimeout 解决 setInterval 计时器不准的问题
    • 使用js在树形(tree)结构中找到子节点的父级路径
    • 使用JS如何判断远程网络图片地址是否失效
    • 使用js操作浏览器cookie的设置,读取,删除
    • 使用JS解决PC端页面适配方案
    • 使用js递归生成树形结构
    • 使用原生js(input type = file)上传图片(Base64)限制大小、类型判断、像素判断
    • 关于JavaScript 数组的复制解析总结
    • 关于JavaScript数组方法使用总结
    • 内置对象
    • 前端 DOM 总结
    • 前端 js 基础总结
    • 前端使用 jszip 解压 .zip 文件获取 file 格式文件
    • 前端各种事件总结
    • 前端常用的JS(代码片段)小工具方法总结
    • 前端登录界面常用的JS小工具方法总结
    • 十六(16)进制与rgb颜色转换
    • 原生 JavaScript 实现 div 随意拖拽原生 JavaScript 实现 div 随意拖拽
    • 原生 JS 实现页面树形(tree)菜单展示功能
    • 原生js实现 table表格列宽拖拽
    • 原生js获取iframe中dom元素或父级元素
    • 如何使用 file-saver 导出文件到本地?
    • 如何使用js将目录路径list转成tree树结构
    • 实现对localStorage、sessionStorage高级封装
    • 将一维数组按指定长度转为二维数组
    • 将网站设为主页以及加入收藏功能实现方法
    • 总结 3 种 HTML 转 PDF 导出的方案
    • 比typeof运算符更准确的js类型判断
    • 浏览器模型
    • 监听滚动条事件-返回顶部的方法
    • 简析JavaScript中的事件委托问题
    • 返回顶部的通用Js方法
    • 非常实用的Js代码工具片段
    • JS_根据鼠标位置缩放元素、拖拽
    • js_登录验证码绘制
    • JS-以鼠标位置为中心的滑轮缩放-图片
    • js生成目录并实现目录节点跟随滚动高亮
    • 使用js实现标题跳转与复制实现方法
    • 使用原生js动态实现文件的上传功能
    • 使用原生js提取md中的图片信息
    • 3d-force-graph使用方法
    • js 前端(web)浏览器端读取文件目录
    • 原生js监听窗口大小变化
    • JS 中 Promise 用法(简要总结)
  • CSS笔记

  • HTML笔记

  • Canvas笔记

  • Nuxt笔记

  • React笔记

  • Vue笔记

  • TypeScript笔记

  • AI相关笔记

  • 开发文档
  • JavaScript笔记
NoteZ
2019-07-16
目录

Axios 的各种请求方式及传参格式总结

# 使用 npm 安装

$ npm install axios
1

# 使用 cdn 引入

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

# 使用案例

# 执行 GET 请求

axios.get(url[, config])

axios.get('api/url', {
    params: {
        id: k12cM323Kmll86ds,
        name: 'qwdz',
    }
}).then(res => {
    console.log(res);
}).catch(error => {
    console.log(error);
});
//或者
axios({
    methods: 'get',
    url: 'url',
    params: {
        id:12
    }
}).then(res => {
    console.log(res);
}).catch(error => {
    console.log(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 执行 POST 请求

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

axios.post('api/url', {
    id: "ascsd123123dsf",
    name: 'qwdz'
}).then(res => {
    console.log(res);
}).catch(error => {
    console.log(error);
});
//或者
axios({
   url: '/url',
   methods: 'post',
   data: {
        id: "ascsd123123dsf",
        name: 'qwdz'
    }
 }).then(res => {
    console.log(res);
}).catch(error => {
    console.log(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 执行 DELETE 请求

axios.delete(url[, config])

axios.delete('api/url', {
    data: {
        id: k12cM323Kmll86ds,
        name: 'qwdz',
    }
}).then(res => {
    console.log(res);
}).catch(error => {
    console.log(error);
});
1
2
3
4
5
6
7
8
9
10

# 执行 PUT 请求

axios.put(url[, data[, config]]) 更新数据,(所有数据推送后端)

axios.put('api/url', {
    id: k12cM323Kmll86ds,
    name: 'qwdz',
}).then(res => {
    console.log(res);
}).catch(error => {
    console.log(error);
});
1
2
3
4
5
6
7
8

# 执行 PATCH 请求

axios.patch(url[, data[, config]]) 更新数据,(只将修改的数据推送到后端)

axios.patch('api/url', {
    id: k12cM323Kmll86ds,
    name: 'qwdz',
}).then(res => {
    console.log(res);
}).catch(error => {
    console.log(error);
});
1
2
3
4
5
6
7
8

# 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
1
2
3
4
5
6
7
8
9
10
11
12

# Axios 部分 API

可以通过向 axios 传递相关配置来创建请求,例如:

axios(config)
// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
axios(url[, config])
// 发送 GET 请求(默认的方法)
axios('/user/12345');
1
2
3
4
5
6
7
8
9
10
11
12
13

# 请求方法的别名

为方便起见,为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
1
2
3
4
5
6
7

在使用别名方法时, url、method、data 这些属性都不必在配置中指定。

# 请求并发

处理并发请求的助手函数

axios.all(iterable)
axios.spread(callback)
1
2

# 创建实例

可以使用自定义配置新建一个 axios 实例

axios.create([config])
var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
1
2
3
4
5
6

# 请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

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

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

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

    return data;
  }],

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

    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 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', 和 'PATCH'
  // 在没有设置 `transformRequest` 时,必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属:FormData, File, Blob
  // - Node 专属: Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间,请求将被中断
  timeout: 1000,

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

  // `adapter` 允许自定义处理请求,以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

  // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
  // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默认的

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

  // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的

  // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

  // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,

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

  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0,将不会 follow 任何重定向
  maxRedirects: 5, // 默认的

  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken` 指定用于取消请求的 cancel token
  // (查看后面的 Cancellation 这节了解更多)
  cancelToken: new CancelToken(function (cancel) {
  })
}
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

# 响应结构

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

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

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

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

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

  // `config` 是为请求提供的配置信息
  config: {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用 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);
  });
1
2
3
4
5
6
7
8

在使用 catch 时,或传递 rejection callback 作为 then 的第二个参数时,响应可以通过 error 对象可被使用,正如在错误处理这一节所讲。

# 全局配置的默认值

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';
1
2
3

# 自定义实例默认值

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
1
2
3
4
5
6
7

# 配置的优先顺序

配置会以一个优先顺序进行合并。这个顺序是:在 lib/defaults.js 找到的库的默认值,然后是实例的 defaults 属性,最后是请求的 config 参数。后者将优先于前者。这里是一个例子:

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

// 覆写库的超时默认值
// 现在,在超时前,所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});
1
2
3
4
5
6
7
8
9
10
11
12

# 拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

import Axios from 'axios';
import qs from 'qs';
const axios = Axios.create();
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    if (config.method === 'post') {
        config.data = qs.stringify(config.data);
    }
    if (config.method === 'get') {
        config.data = { params: config.data };
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
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

如果你想在稍后移除拦截器,可以这样:

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
1
2

可以为自定义 axios 实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
1
2

# 错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出,但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13

可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 状态码在大于或等于500时才会 reject
  }
})
1
2
3
4
5

# 取消请求

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();
1
2
3
4
5
6
7
8
9
10
11
12
#Axios#JavaScript
上次更新: 2024/01/30, 00:35:17
Axios 文件下载实现进度条功能
axios简单使用

← Axios 文件下载实现进度条功能 axios简单使用→

最近更新
01
Gitea数据备份与还原
03-10
02
Linux 中使用 rsync 同步文件目录教程
03-10
03
Linux 使用 rsync 互相传输同步文件的简单步骤
03-08
更多文章>
Theme by Vdoing | Copyright © 2019-2025 NoteZ,All rights reserved | 冀ICP备2021027292号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式