Axios简介

Axios

1.Axios简介

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

axios的github: https://github.com/axios/axios

Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post等请求,可以用在浏览器和 node.js 中。React等框架的出现,促使了Axios轻量级库的出现,因为Vue等,不需要操作Dom,所以不需要引入Jquery.js了。

promise

异步编程的一种解决方案

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果

Promise提供统一的API,各种异步操作都可以用同样的方法进行处理

Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态 (英语意思就是“承诺”,表示其他手段无法改变)

与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。 有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数

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

首先就是引入axios

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

使用 npm:

$ npm install axios
4.Axios提供的请求方法
axios(config)

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]])
5.Axios的config的配置信息
{
  // `url` 是对应访问服务器的请求
  url: '/user',

  // `method` 用于设置请求方法,默认是get
  method: 'get', // default

  //设置路径url的统一前缀
  baseURL: 'https://some-domain.com/api/',

  //`params`是以URL中?后的参数形式提交 
  params: {
    ID: 12345
  },

  //data数据会放入request body中
  //支持request methods 'PUT', 'POST', 'DELETE ,  'PATCH'
  data: {
    firstName: 'Fred'
  },
  
  //method为post提交方式,以字符串放入请求体中,没有key 
  data: 'Country=Brasil&City=Belo Horizonte',

  // `timeout` specifies the number of milliseconds before the request times out.
  // If the request takes longer than `timeout`, the request will be aborted.
  timeout: 1000, // default is `0` (no timeout)

  // `responseType` 设置服务器返回数据类型,默认是json,一般不用改动
  // 可用项: 'arraybuffer', 'document', 'json', 'text', 'stream'
  responseType: 'json' // default
}
6.Response

axios响应对象包括了以下信息

{
  // `data`是服务器提供的响应信息 
  data: {},

  // `status` 是HTTP的响应状态码
  status: 200,

  // `statusText`是HTTP的响应文本信息 
  statusText: 'OK',

  // `headers` 响应信息的HTTP的headers 
  headers: {},

  // `config`是axios请求中的配置对象信息 request
  config: {},

  // `request` 是请求对象信息 
  request: {}
}
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喜欢木木

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值