axios进阶之路——基础篇
axios进阶之路——基础篇
流眸
发布于 2020-05-20 00:32:18
发布于 2020-05-20 00:32:18
本课题包含三篇：基础篇；拦截器篇；封装篇。本篇为基础篇，主题为axios基础介绍及安装使用。
一、 关于Axios
1. Axios是什么
- Axios是一个基于 promise 的 HTTP 库
- 可以用于浏览器和 node.js
- 类似于 Ajax，进行前后端交互使用
2. Axios 特性
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御 XSRF
二、 安装使用
1. 安装
两种方式：（二选一）
- npm
- yarn
// 使用npm：
$ npm install axios// 或者使用yarn：
$ yarn add axios2. 使用
基础使用示例
// 引入axios
import axios from 'axios'
axios.get('url').then(res => {
// 请求成功要做的事
}).catch(err => {
// 请求失败要做的事
})三、 基础介绍及使用
1. axios常用请求方法
- get
- post
- put
- patch
- delete
2. 区别
方法 | 用途 | 备注 |
|---|---|---|
get | 获取数据 | / |
post | 提交数据 | 表单提交、文件上传等 |
put | 更新数据 | 所有数据推送到后端 |
patch | 更新数据 | 只将修改的数据推送到后端 |
delete | 删除数据 | / |
其中 get, post目前前后端交互中最为常用
注：请求方法一般由后端定义，实际项目使用参照后端文档规则
3. 常用示例（GET、POST）
GET
// get
axios.get('/data.json',{
// 注 此处参数写入params中
params: {
id: 'zxm'
}
}).then(res => {
console.log(res);
})POST
// post：参数直接跟在url后面即可
axios.post('xxxxxxxxx', {
xxx: 'xxxx',
xxxx: 'xxxx'
}
}).then(res => {
console.log(res);
})4. 并发请求
并发请求：同时进行多个请求，并统一处理返回值。两个步骤：
axios.all([]).then()axios.spread()
举例：
axios.all([
axios.get('url1'),
axios.get('url2')
]).then(
axios.spread((res1, res2) => {
console.log(res1, res2);
})
)------
基础篇到此结束，下篇记录 axios简单实例， 请求拦截器， 响应拦截器。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-05-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录