axios

版本:v0.18.0

0.18.0的版本更新有一段时候了，运用起来跟本来基本没有什么变化。然则增加了一些功用，比方毛病处置惩罚的分辨，于07-06-2018从新翻译和校验了该翻译，改正了一些错别字和表达不准的处所，然则不免仍有毛病，迎接指出。

由于工作须要，个人也包装了一个浅易的跟axios作风一样在小递次中运用的要求函数。轻易一些运用相似vue写法框架来开辟小递次的人更轻易的无缝桥接。
有须要的读者可以寓目一下。 传送门

关于Promise的一演习和练习，此处有一个比较好的鸠合。传送门

正文

基于Promise的http库，适用于浏览器和node.js。

原文

点击检察原文

特征

• 浏览器端发起XMLHttpRequests要求
• node端发起http要求
• 支撑Promise API
• 阻拦要乞降返回
• 转化要乞降返回（数据）
• 作废要求
• 自动转化json数据
• 客户端支撑抵抗XSRF（跨站要求捏造）

浏览器支撑

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	8+ ✔

装置

运用npm：

$ npm i axios

运用 bower

$ bower instal axios

运用cdn

<!--国内bootCDN-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

示例

发起一个GET要求

const axios = require('axios')

//发起一个user要求，参数为给定的ID
axios.get('/user?ID=12345')
.then(function(respone){
    console.log(response);
})
.catch(function(error){
    console.log(error);
});

//可设置的体式格局完成上面的代码以下
axios.get('/user',{
    params:{
        ID:12345
    }
}).then(function(response){
        console.log(response);
  }).catch(function(error){
        console.log(error)
    });

注重：async/await是ECMAScript2017的语法，ie和一些老旧的浏览器不支撑，请警惕运用。
（译者话：运用ts的话可以很轻易的编译和运用，也不须要任何垫片，目标编译成es5即可）

发起一个POST要求

axios.post('/user',{
    firstName:'friend',
    lastName:'Flintstone'
})
.then(function(response){
    console.log(response);
})
.catch(function(error){
    console.log(error);
});

发起一个多重并发要求

function getUserAccount(){
    return axios.get('/user/12345');
}

function getUserPermissions(){
    return axios.get('/user/12345/permissions');
}

axios.all([getUerAccount(),getUserPermissions()])
    .then(axios.spread(function(acc,pers){
        //两个要求如今都完成
    }));

译者话：由于axios.all运用的是相似Primise.all的功用，所以假如个中有一个要求涌现了毛病那末就会住手要求，所以发起关于单个要求最好附加上处置惩罚的catch。

axios API

依据本身需求可以对axios通报一些的设置来天生要求（Request）。

axios(config)

//发起 POST要求

axios({
    method:'post',//要领
    url:'/user/12345',//地点
    data:{//参数
        firstName:'Fred',
        lastName:'Flintstone'
    }
});

//经由历程要求猎取长途图片
axios({
    method:'get',
    url:'http://bit.ly/2mTM3Ny',
    responseType:'stream'
})
    .then(function(response){
        response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
    })

axios(url[,config])

//发起一个GET要求
axios('/user/12345/);

要求要领的别号。

为了轻易，axios供应了一切要求要领的别号支撑

axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.options(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

注重

当时用别号要领时url,method,以及data属性没必要在config中明白指定（如上面示例的post要领要求）。

并发 Concurrency

有用的要领

axios.all(iterable)
axios.spread(callback)

建立一个实例（instance）

你可以运用自定义设置建立一个新的实例

axios.create([config])

var instance = axios.create({
    baseURL:'http://some-domain.com/api/',
    timeout:1000,
    headers:{'X-Custom-Header':'foobar'}
});

实例要领

下面列出了一些实例可用要领，细致的设置将在实例中运用。

axios#request(config)
axios#get(url[,config])
axios#delete(url[,config])
axios#head(url[,config])
axios#options(url[,config])
axios#post(url[,data[,config]])
axios#put(url[,data[,config]])
axios#patch(url[,data[,config]])

Requeset Config要求设置

以下列出了一些要求时的设置选项。只要url是必需的，假如没有指明method的话，默许的要求要领是GET.

{
    //`url`是服务器链接，用来要求
    url:'/user',

    //`method`是发起要求时的要领
    method:`get`,

    //`baseURL`假如`url`不是相对地点，那末将会加在其前面。
    //可以很轻易的对相对地点的axios实例设置`baseUrl`。
    baseURL:'http://some-domain.com/api/',

    //`transformRequest`许可要求的数据在发送至服务器之前举行转化。
    //这个只适用于`PUT`,`POST`,`PATCH`要领。
    //数组中的末了一个函数必需返回一个字符串或许一个`ArrayBuffer`,或许`Stream`,`Buffer`实例,`ArrayBuffer`,`FormData`
    //另外你也可以须要设置下headers对象
    transformRequest:[function(data,headers){
        //依本身的需求对要求数据举行处置惩罚
        return data;
    }],

    //`transformResponse`许可对返回的数据传入then/catch之前举行处置惩罚
    transformResponse:[function(data){
        //依须要对数据举行处置惩罚
        return data;
    }],

    //`headers`是自定义的要被发送的信息头
    headers:{'X-Requested-with':'XMLHttpRequest'},

    //`params`是要求衔接中的要求参数，必需是一个纯对象，或许URLSearchParams对象
    params:{
        ID:12345
    },
    
    //`paramsSerializer`是一个可选的函数，用来掌握和序列化参数
    //比方：（https://ww.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`定义要求的时候，单元是毫秒。
    //假如要求的时候凌驾这个设定时候，要求将会住手。
    timeout:1000,
    
    //`withCredentials`表明跨跨域要求书否须要证实。
    withCredentials:false //默许值

    //`adapter`适配器，许可自定义处置惩罚要求，这会使测试更简朴。
    //返回一个promise，而且供应一个有用的相应。（检察[response docs](#response-api)）
    adapter:function(config){
        /*...*/
    },

    //`auth`表明HTTP基本的认证应当被运用，而且供应证书。
    //这个会设置一个`authorization` 头（header），而且掩盖你在header设置的Authorization头信息。
    auth:{
        username:'janedoe',
        password:'s00pers3cret'
    },

    //`responsetype`表明服务器返回的数据范例，这些范例的设置应当是
    //'arraybuffer','blob','document','json','text',stream'
    responsetype:'json',

    //`responseEncoding`表明剖析相应的编码体式格局。
    //**注重**会无视responseType为stream或许客户端的要求。
    responseEncoding:'utf8'//默许值

    //`xsrfCookieName`时cookie做xsrf会话时的名字。
    xsrfCookieName:'XSRF-TOKEN',//默许值

    //`xsrfHeaderName` 是http头（header）的名字，而且该头照顾xsrf的值
    xrsfHeadername:'X-XSRF-TOKEN'，//默许值

    //`onUploadProgress`许可处置惩罚上传历程的历程事宜
    onUploadProgress: function(progressEvent){
        //当地历程事宜发作时想做的事
    },

    //`onDownloadProgress`许可处置惩罚下载历程的历程事宜
    onDownloadProgress: function(progressEvent){
        //下载历程当中想做的事
    },

    //`maxContentLength` 定义http返回内容的最大字节容量
    maxContentLength: 2000,

    //`validateStatus` 定义promise的resolve和reject。
    //http返回状况码，假如`validateStatus`返回true（或许设置成null/undefined），promise将会resolve；其他的promise将reject。
    validateStatus: function(status){
        return status >= 200 && stauts < 300;//默许
    },

    //`maxRedirect`定义重导向到node.js中的最大数目。
    //假如值为0，那末没有redirect。
    maxREdirects:5,//默许值

    //`socketPath`定义一个在node.js中运用的 `UNIX Socket`。
    //比方 `/var/run/docker.sock`发送要求到docker daemon。
    //`socketPath`和`proxy`只可定义其一。
    //假如都定义则只会运用`socketPath`。
    socketPath:null,//默许值

    //`httpAgent` 和 `httpsAgent`当发生一个http或许https要求时离别定义一个自定义的代办，在nodejs中。
    //这个许可设置一些选选个，像是`keepAlive`--这个在默许中是没有开启的。
    httpAgent: new http.Agent({keepAlive:treu}),
    httpsAgent: new https.Agent({keepAlive:true}),

    //`proxy`定义服务器的主机名字和端口号。
    //`auth`表明HTTP基本认证应当跟`proxy`相衔接，而且供应证书。
    //这个将设置一个'Proxy-Authorization'头(header)，掩盖本来自定义的。
    proxy:{
        host:127.0.0.1,
        port:9000,
        auth:{
            username:'cdd',
            password:'123456'
        }
    },

    //`cancelTaken` 定义一个作废，可以用来作废要求
    //（检察 下面的Cancellation 的细致部份）
    cancelToken: new CancelToken(function(cancel){
    })
}

返回相应提要 Response Schema

一个要求的返回包括以下信息

{
    //`data`是服务器的供应的复兴（相关于要求）
    data{},

    //`status`是服务器返回的http状况码
    status:200,


    //`statusText`是服务器返回的http状况信息
    statusText: 'ok',

    //`headers`是服务器返回中照顾的headers
    headers:{},

    //`config`是对axios举行的设置，目标是为了要求（request）
    config:{}

    //`request`是猎取当前相应的要求
    //它是node.js中末了一次的 ClientRequest的实例（在redirect中）
    //或许是在浏览器中的XMLHttpREquest实例
}

运用then时，你会接收到下面的信息：

axios.get('/user/12345')
    .then(function(response){
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
    });

运用catch时，或许传入一个reject callback作为then的第二个参数，那末返回的毛病信息将可以被处置惩罚。

默许设置（Config Default)

你可以设置一个默许的设置，这设置将在以后的每次要求中见效。

全局默许设置 Global axios defaults

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';

实例中自定义默许值 Custom instance default

//当建立一个实例时举行默许设置
var instance = axios.create({
    baseURL:'https://api.example.com'
});

//或许在实例建立以后转变默许值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

设置优先级 Config order of precedence

设置(config)将根据优先递次兼并起来。起首的是在lib/defaults.js中定义的默许设置，其次是defaults实例属性的设置，末了是要求中config参数的设置。越往后面的品级越高，会掩盖前面的设置。
看下面这个例子：

//运用默许库的设置建立一个实例，
//这个实例中，运用的是默许库的timeout设置，默许值是0。
var instance = axios.create();

//掩盖默许库中timeout的默许值
//此时，一切的要求的timeout时候是2.5秒
instance.defaults.timeout = 2500;

//掩盖该次要求中timeout的值，这个值设置的时候更长一些
instance.get('/longRequest',{
    timeout:5000
});

阻拦器 interceptors

你可以在要求或许返回被then或许catch处置惩罚之前对他们举行阻拦。

//增加一个要求阻拦器
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);
});

假如你须要在稍后移除阻拦器,你可以

var myInterceptor = axios.interceptors.request.use(function(){/*...*/});
axios.interceptors.request.eject(myInterceptor);

你可以在一个axios实例中运用阻拦器

var instance = axios.create();
instance.interceptors.request.use(function(){/*...*/});

毛病处置惩罚 Handling Errors

axios.get('user/12345')
    .catch(function(error){
        if(error.response){
            //存在要求，然则服务器的返回一个状况码
            //他们是在2xx以外
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        }else if(error.request){
          //假如是要求时的毛病，且没有收到相应
          //`error.request`是一个浏览器的XMLHttpRequest实例，或许node.js的 ClientRequest实例。
          console.log(error.request)
        } 
        else{
            //一些毛病是在设置要求时触发的
            console.log('Error',error.message);
        }
        console.log(error.config);
    });

你可以运用validateStatus设置选项自定义HTTP状况码的毛病局限。

axios.get('user/12345',{
    validateStatus:function(status){
        return status < 500;//当返回码小于即是500时视为毛病
    }
});

作废 Cancellation

你可以运用cancel token作废一个要求

axios的cancel token API是基于已打消的**cnacelable promises proposal**发起。

你可以运用CancelToken.source工场函数建立一个cancel token，以下：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
    cancelToken:source.toke
}).catch(function(thrown){
    if(axiso.isCancel(thrown)){
        console.log('Rquest canceled', thrown.message);
    }else{
        //handle error
    }
});

//作废要求(信息参数设可设置的)
source.cancel("操纵被用户作废");

你可以给CancelToken组织函数通报一个executor function来建立一个cancel token:

var CancelToken = axios.CancelToken;
var source = CancelToken.source()

axios.get('/user/12345',{
  cancelToke:source.token
}).catch(function(thrown){
  if(axios.isCancel(throw)){
    console.log('要求已作废',throw.message)
  }else{
    //处置惩罚毛病
  }
})

axios.post('/user/2345',{
  name:'new name'
},{
  cancelToken:source.toke
})

source.cancel('错做已被用户作废！')

你也可以给CancelToke的组织函数通报一个处置惩罚函数来天生一个cancel token。

const CancelToken = axios.CancelToken
let cancel;

acios.get('/user/12345',{
  cancelToken:new CancelToken(function excutor(c){
    //一个处置惩罚函数接收一个cancel函数作为参数
    cancel = c
  })
})

// 作废要求
cancel()

注重：你可以运用同一个cancel token作废多个要求。

运用 application/x-www-form-urlencoded 花样

本人做的简朴包装

默许状况下，axios串连js对象为JSON花样。为了发送application/x-wwww-form-urlencoded花样数据，
你可以运用一下的设置。

浏览器 Browser

在浏览器中你可以以下运用URLSearchParams API:

var params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/foo',params);

注重：URLSearchParams不支撑一切的浏览器，然则这里有个垫片
（poly fill）可用（确保垫片在浏览器全局环境中）

其他要领：你可以运用qs库来对数据编码。

var qs = require('qs');
axios.post('/foo', qs.stringify({'bar':123}));

或许其他要领(es6)

import qs from 'qs';
const data = {'bar':123};
const options = {
  method:'POST',
  headers:{
    'content-type':'application/x-www-from-urlencoded'
  },
  data:qs.stringify(data),
  url
}
axios(options)

兼容Semver

当axios放出1.0版本时，一些不兼容的变动将会放在新的版本中。比方0.5.1和0.5.4有雷同的api，然则0.6.0会有不兼容的变化。

译者：小学问
在npn的版本习气中，版本运用的习气是a.b.c,个中c的变化是一些bug的修复，b是一些功用的增加，a是大的版本的变化，会涌现不兼容的状况。

Node.js

在nodejs中，你可以以下运用querystring:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({foo:'bar'}));

你一样可以运用qs库。

promises

axios 基于原生的ES6 Promise 完成。假如环境不支撑请运用垫片.

TypeScript

axios 包括TypeScript定义

import axios from 'axios'
axios.get('/user?ID=12345')