前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >axios进阶之路——基础篇

axios进阶之路——基础篇

作者头像
流眸
发布2020-05-20 00:32:18
7470
发布2020-05-20 00:32:18
举报

本课题包含三篇:基础篇;拦截器篇;封装篇。本篇为基础篇,主题为axios基础介绍及安装使用。

一、 关于Axios

1. Axios是什么

  • Axios是一个基于 promise 的 HTTP 库
  • 可以用于浏览器和 node.js
  • 类似于 Ajax,进行前后端交互使用

2. Axios 特性

  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御 XSRF

二、 安装使用

1. 安装

两种方式:(二选一)

  1. npm
  2. yarn
代码语言:shell
复制
// 使用npm:
$ npm install axios
代码语言:shell
复制
// 或者使用yarn:
$ yarn add axios

2. 使用

基础使用示例

代码语言:javascript
复制
// 引入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
代码语言:javascript
复制
// get
axios.get('/data.json',{    
    // 注 此处参数写入params中    
    params: {        
        id: 'zxm'    
    }
}).then(res => {    
    console.log(res);
})
POST
代码语言:javascript
复制
// post:参数直接跟在url后面即可
axios.post('xxxxxxxxx', {        
    xxx: 'xxxx',        
    xxxx: 'xxxx'    
    }
}).then(res => {    
    console.log(res);
})

4. 并发请求

并发请求:同时进行多个请求,并统一处理返回值。两个步骤:

  1. axios.all([]).then()
  2. axios.spread()

举例:

代码语言:javascript
复制
axios.all([    
    axios.get('url1'),    
    axios.get('url2')
]).then(    
    axios.spread((res1, res2) => {        
        console.log(res1, res2);    
    })
)

------

基础篇到此结束,下篇记录 axios简单实例请求拦截器响应拦截器

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-05-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 流眸 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、 关于Axios
    • 1. Axios是什么
      • 2. Axios 特性
      • 二、 安装使用
        • 1. 安装
          • 2. 使用
          • 三、 基础介绍及使用
            • 1. axios常用请求方法
              • 2. 区别
                • 3. 常用示例(GET、POST)
                  • GET
                  • POST
                • 4. 并发请求
                • ------
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档