axios快速上手

vue-js-and-ajax-requests.jpg

Intro: 本文档参考axios的官方文档和网上的axios使用教程所写，后续还会不断完善，鄙人水平有限，还望批评指正

---

强烈建议查看完整文档，链接如下

英文原文档：
https://github.com/mzabriskie/axios

中文文档：
https://www.awesomes.cn/repo/mzabriskie/axios
https://segmentfault.com/a/1190000008470355

---

什么是axios

引用axios的介绍：

Promise based HTTP client for the browser and node.js

axios是一个基于ES6的Promise的网络请求库，是一个ajax库。

可以实现：

• 在浏览器里建立XHR
• 通过nodejs进行http请求

甚至可以实现：

• 转换或者拦截请求数据或响应数据
• 支持Promise的API
• 可以取消请求
• 自动转换JSON
• 可以防御XSRF攻击！

浏览器支持也没什么问题

Chrome	Firefox	Safari	Opera	Edge	IE
Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	8+ ✔

[图片上传失败...(image-e55cea-1540905913559)]

怎么用

方法一 npm安装

1. npm下载

npm install axios

2. webpack之类的打包工具导入

import axios from 'axios'

// or

var axios=require('axios');



//===============Vue===================
// Vue全局引用及使用

import axios from 'axios'
Vue.prototype.$http = axios

this.$http.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

方法二 script标签引入

用法及DEMO

简单的demo

一个简单的HTTP GET请求

// 法一 请求参数写到url中

axios.get('http://getRes.php?id=123456&name=Yangfan').then(function (response) {
  // TODO
  // 返回HTTP请求成功的数据
}).catch(function (error) {
  // TODO
  // 返回HTTP请求失败的失败信息
});

// 法二 请求参数写到axios配置参数中

axios.get('http://getRes.php'，{
  params:{
    id:123456,
    name:"Yangfan"
  }
}).then(function (response) {
  // TODO
  // 返回HTTP请求成功的数据
}).catch(function (error) {
  // TODO
  // 返回HTTP请求失败的失败信息
});

一个简单的HTTP POST 请求

axios.post('http://getRes.php',{
  id:123456,
  name:"Yangfan"
}).then(function (response) {
  // TODO
  // 返回HTTP请求成功的数据
}).catch(function (error) {
  // TODO
  // 返回HTTP请求失败的失败信息
});

自定义请求配置

// 配置
var config={
  method: 'GET',  // 请求方法                                           
  url: 'http://getRes.php',  // 请求url                          
  headers: { 
    token: 'ftv1443qby6bdfa41t90sfvq89hg3h54u989m9imog79g4'   // 请求头                                              
  },
  data: {         // 需要传递的数据                                 
    id: 123456,
    name: 'Yangfan'
  }
};

axios(config).then(function (response) {
  // TODO
  // 返回HTTP请求成功的数据
}).catch(function (error) {
  // TODO
  // 返回HTTP请求失败的失败信息
});

完整配置

参数	类型	注解
url	String	url是服务器链接，用来请求
method	String	method是发起请求时的请求方法
baseURL	String	baseURL如果url不是绝对地址，那么将会加在其前面。
transformRequest	Function	transformRequest允许请求的数据在传到服务器之前进行转化。
transformResponse	Function	transformResponse允许返回的数据传入then/catch之前进行处理
headers	Object	headers是自定义的要被发送的头信息
params	Object	params是请求连接中的请求参数，必须是一个纯对象，或者URLSearchParams对象
paramsSerializer	Function	paramsSerializer是一个可选的函数，是用来序列化参数
data	Object	data是请求提需要设置的数据 只适用于应用的'PUT','POST','PATCH'，请求方法 当没有设置transformRequest时，必须是以下其中之一的类型（不可重复？）： -string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams -仅浏览器：FormData,File,Blob -仅Node：Stream
timeout	Number	timeout定义请求的时间，单位是毫秒。
withCredentials	Boolean	withCredentials表明是否跨网站访问协议，
adapter	Function	adapter适配器，允许自定义处理请求，这会使测试更简单。
auth	Object	auth表明HTTP基础的认证应该被使用，并且提供证书。 这个会设置一个authorization 头（header），并且覆盖你在header设置的Authorization头信息。
responseType	String	responsetype表明服务器返回的数据类型，这些类型的设置应该是 'arraybuffer','blob','document','json','text',stream'
xsrfCookieName	String	xsrfCookieName是cookie名，用作xsrf token值
xsrfHeaderName	String	xsrfHeaderName 是http头（header）的名字，并且该头携带xsrf的值
onUploadProgress	Function	onUploadProgress允许处理上传过程的事件
onDownloadProgress	Function	onDownloadProgress允许处理下载过程的事件
maxContentLength	Number	maxContentLength 定义http返回内容的最大容量
validateStatus	Function	validateStatus 定义promise的resolve和reject。 http返回状态码，如果validateStatus返回true（或者设置成null/undefined），promise将会接受；其他的promise将会拒绝。
maxRedirects	Number	maxRedirects定义了node.js中要重定向的最大数量。 如果设置为0，则不会重定向。
httpAgent	Object	httpAgent 和 httpsAgent当产生一个http或者https请求时分别定义一个自定义的代理，在nodejs中。 这个允许设置一些选选个，像是keepAlive--这个在默认中是没有开启的。
httpsAgent	Object	httpAgent 和 httpsAgent当产生一个http或者https请求时分别定义一个自定义的代理，在nodejs中。 这个允许设置一些选选个，像是keepAlive--这个在默认中是没有开启的。
proxy	Object	proxy定义服务器的主机名字和端口号。 auth表明HTTP基本认证应该跟proxy相连接，并且提供证书。 这个将设置一个'Proxy-Authorization'头(header)，覆盖原先自定义的。
cancelToken	Function	cancelTaken 定义一个取消，能够用来取消请求

返回结果

{
  // 服务器返回的数据                                        
  data: {},

  // 服务器返回的状态码                              
  status: 200,

  // 服务器返回的状态信息                                                                     
  statusText: 'OK',

  // 服务器返回的响应头信息                      
  headers: {},

  // `config`是提供给`axios`的请求的配置
  config: {}
}