axios快速上手

axios快速上手_第1张图片
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

  1. 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 httpAgenthttpsAgent当产生一个http或者https请求时分别定义一个自定义的代理,在nodejs中。

这个允许设置一些选选个,像是keepAlive--这个在默认中是没有开启的。
httpsAgent Object httpAgenthttpsAgent当产生一个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: {}
}

你可能感兴趣的:(axios快速上手)