Vue中AXIOS知识点总结

AXIOS

什么是axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
有以下特点：
● 从浏览器中创建 XMLHttpRequests（客户端）
● 从 node.js 创建 http 请求（服务端）
● 支持 Promise API
● 拦截请求和响应
● 转换请求数据和响应数据
● 取消请求
● 自动转换 JSON 数据
● 客户端支持防御 XSRF

与jQuery-AJAX的区别

● 都是对AJAX的封装
● 都有高层封装方法post/get
● jQuery-AJAX依赖于jquery，axios独立
● AJAX的回调必须在内部完成，axios基于promise可以在任意时候操作回调
● Axios既提供了并发的封装，也没有fetch的各种问题，体积也较小。

安装

使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

简易demo

因为axios由promise封装，所以返回的为promise对象，我们可以通过then方法返回请求成功的数据信息，通过catch方法返回请求失败的数据信息。
GET

// 为给定 ID 的 user 创建请求
var pro = axios.get('/user?ID=12345')
pro.then(function (response) {
   
    console.log(response);
}).catch(function (error) {
   
    console.log(error);
});
//get方式的参数也可以这么指定
axios.get('/user', {
   
    params: {
   
      ID: 12345
    }
})

POST

axios.post('/user', {
   
    firstName: 'Fred',
    lastName: 'Flintstone'
},{
   配置信息}).then(function (response) {
   
    console.log(response);
}).catch(function (error) {
   
    console.log(error);
});

完整AXIOS实例

axios({})
{
   // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  // 请求转换器，我们可以理解为一个中转站。后面我们还会学习到拦截器，再细分区别
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理，这里不建议对请求头进行设置
    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {
'X-Requested-With': 'XMLHttpRequest',
//修改提交数据的格式
'Content-Type': 'application/x-www-form-urlencoded'
//如果项目的接口需要携带token，我们可以在头部设置token信息
'Authorization':getToken()
},

  // `params` 是即将与请求一起发送的 URL 参数(GET)
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },
//大部分情况下，我们经常会直接绑定要URL地址上 81.163.1.1?name=zhangsan
   // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求花费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

   // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

  // `adapter` (适配器)允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

 // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncod