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` 用于设置请求方法，默认是getmethod: '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请求中的配置对象信息 requestconfig: {},// `request` 是请求对象信息 request: {}}