Axios 学习

Axios 学习简介Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF配置说明axios({m...

左手121

306人浏览 · 2018-07-25 10:37:57

左手121 · 2018-07-25 10:37:57 发布

Axios 学习

简介

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

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

配置说明

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

常用
url : 用于请求的服务器 URL
method : 创建请求时使用的方法，默认是 get
baseURL : 动加在 url 前面，除非 url 是一个绝对 URL
headers : 自定义请求头
params : 与请求一起发送的 URL 参数，必须是一个无格式对象(plain object)或 URLSearchParams 对象
data : 作为请求主体被发送的数据，只适用于这些请求方法 PUT, POST, PATCH。在没有设置 transformRequest 时，必须是以下类型之一:
- string, lain object, ArrayBuffer, ArrayBufferView, URLSearchParams
- browser : FormData, File, Blob
- Node : Stream
responseType : 服务器响应的数据类型，默认 json
timeout : 指定请求超时的毫秒数。默认 1000
cancelToken: new CancelToken(function (cancel) {}) : 指定用于取消请求的 cancel token
返回的响应信息

{
  // 服务器提供的响应
  data: {},
  // 来自服务器响应的 HTTP 状态码
  status: 200,
  // 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // 服务器响应的头
  headers: {},
  // 为请求提供的配置信息
  config: {}
}

进阶
transformRequest: [function()[] ...] : 允许在向服务器发送前，修改请求数据，只能用在 PUT, POST, PATCH 这几个请求方法。后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformResponse: [function()[] ...] : 在传递给 then/catch 前，允许修改响应数据
paramsSerializer : 负责 params 序列化的函数
withCredentials : 表示跨域请求时是否需要使用凭证，默认 false
adapter : 自定义处理请求，以使测试更轻松，返回一个 promise 并应用一个有效的响应
auth: { username: 'janedoe', password: 's00pers3cret' } : 表示应该使用 HTTP 基础验证，并提供凭据。这将设置一个 Authorization 头，覆写掉现有的任意使用 headers 设置的自定义 Authorization 头
xsrfCookieName : 是用作 xsrf token 的值的 cookie 的名称。默认 XSRF-TOKEN
xsrfHeaderName : 是承载 xsrf token 的值的 HTTP 头的名称。默认 X-XSRF-TOKEN
onUploadProgress : 允许为上传处理进度事件
onDownloadProgress : 允许为下载处理进度事件
maxContentLength : 定义允许的响应内容的最大尺寸。默认 2000
validateStatus : 定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise 。如果 validateStatus 返回 true (或者设置为 null 或 undefined)，promise 将被 resolve; 否则，promise 将被 rejecte。默认 status >= 200 && status < 300 将被 resolve
maxRedirects : 定义在 node.js 中 follow 的最大重定向数目。默认 5
httpAgent: new http.Agent({ keepAlive: true }) / httpsAgent: new https.Agent({ keepAlive: true }) : 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理
proxy : 定义代理服务器的主机名称和端口
- post : 主机
- port : 端口
- auto : 表示 HTTP 基础验证应当用于连接代理，并提供凭据

配置默认值

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';
// 或者
var instance = axios.create();
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置优先级 : 由低到高
- 库的默认值
- 实例的 defaults 属性
- 请求的 config 参数

取消请求

使用上述中的配置的 cancelToken 属性

var source = axios.CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
});
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

// 或者

var cancel;
axios.get('/user/12345', {
  cancelToken: new axios.CancelToken(function(c) {
    cancel = c;
  })
});
cancel('Operation canceled by the user.');

拦截器

// 添加请求拦截器
axios.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

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

多并发

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) {
    // 两个请求现在都执行完成
  })
);