Axios是一个基于promise的http库，可以在浏览器和node.js上运行随后作者尤雨溪也果断放弃了对其官方库vue-resource的维护，直接推荐了axios库。我也是从vue-resource转换过来的，区别说不上来。让我们来谈谈axios在实际开发中的使用

Axios功能

1.从浏览器2创建XMLHttpRequests2。从node.js 3创建http请求。支持Promise API4。拦截请求和响应(即拥有拦截器)5。转换请求数据和响应数据6。取消请求。自动转换JSON数据8。客户端支持防御XSRF

安装axios和qs

NPM iaxios-保存NPM IQs-保存创建项目公共模块API

我用src-util-api.js(公共请求模块js)中的vue-cli创建了这个项目

介绍axios和qs

从‘axios’导入axios有时会将数据发送到后端，但后端无法接收，因此考虑使用qs模块

从“质量体系”导入质量体系决定了开发模式

if(process . ENV . NODE _ ENV==' development '){ axios . defaults . BaseURl='/API '；} else if(process . ENV . NODE _ ENV==' debug '){ axios . defaults . BaseURl=' http://v . juhe . cn '；} else if(process . ENV . NODE _ ENV==' production '){ axios . defaults . BaseURl=' http://v . juhe . cn '；}全局设置标题信息

axios . defaults . headers . post[' Content-Type ']=' application/x-www-form-URL encoded；charset=UTF-8 '；全局设置超时

axios . defaults . time out=10000；请求路由拦截

在发送请求之前，您可以做一些判断，看看它是否是合法用户

Axios。拦截器。请求。使用(function(config){//一般判断这个位置的token中是否存在返回配置；}，函数(错误){//如何处理请求错误？返回Promise.reject(错误)；});响应拦截

axios . intercepts . response . use(function(response)){//处理响应数据if(response . status===200){ return promise . resolve(response)；} else { return Promise.reject(响应)；} }，函数(错误){ //未能处理响应。返回Promise.reject(错误)；});封装请求方法

使用ES6模块化出口进口进口

在ES6之前，前端采用Requirejs或seaJS实现模块化。requireJS是基于AMD规范的模块化库，而seaJS是基于CMD规范的模块化库。两者都是为了推广前端模块化工具。现在ES6自带模块化，但是现代浏览器都不同程度的支持模块，所以需要使用babelJS或者Traceur将ES6代码转换成与ES5版本兼容的JS代码。

获取请求

导出函数get(url，params){返回新的Promise((解析，拒绝)={ axios.get(url，{ params: params })。然后(RES={ resolve(RES . data)；}).catch(err={ reject(err . data)})}；}发布请求

导出函数post(url，params) {返回新的Promise((解析，拒绝)={ axios.post(url，qs.stringify(params))。然后(RES={ resolve(RES . data)；}) .catch(err={ reject(err . data)})}；}实际使用

将js引入main.js

从导入{获取，发布}。Vue原型上的/utils/API//mount方法Vue . prototype . get=get；vue . prototype . post=post；配置请求环境

这里通过开发服务器请求代理

当请求过程中有/api字符串时，它将自动转换为目标服务器地址(target)

devserver : { historyapifallback : true，hot: true，inline: true，stats: { colors: true }，proxy: {//匹配代理的URL '/API ' : {//目标服务器地址target: 'http://v.juhe.cn '，//路径重写路径重写3360 {'/API' 3360''}，

this.get('/toutiao/index？Type=topkey=secret key '，{})。然后((RES)={ if(RES . error _ code===0){ resolve(RES)；}else{ //此处抛出的异常被reject(错误)下面的catch捕获；}}).catch ((err)={console.log (err)})返回数据

使用承诺

1.例如，在用户想要请求url1接口之后，调整url2接口。

var promise=new Promise((解析，拒绝)={ let url1='/toutiao/index？type=topkey=secret key ' this . get(URL，{})。然后((RES)={ resolve(RES)；}) .catch((err)={ console . log(err)})})；promise .然后((res)={ let url2='/toutiao/index？Type=topkey=secret key' this。get (ur2，{})。那么((RES)={//只有当url1请求数据时才会调用url2，否则等待resolve(RES)；}).catch((err)={ console . log(err)})} promise对象

Promise有三种状态：pending:正在等待或进行中，这意味着没有获得任何结果。resolved:已经完成，这意味着我们已经获得了预期的结果。我们可以继续执行rejected:这也意味着我们已经获得了结果，但因为结果不是我们想要的，所以拒绝持有(用catch捕捉异常)这三种状态不受外界影响，状态只能从待定变为已解决或已拒绝，而且是不可逆的(顾名思义，承诺的东西怎么还)。在Promise对象的构造函数中，取一个函数作为第一个参数。这个函数用来处理Promise的状态变化

这里需要注意的是，then和catch都会返回一个新的Promise实例！每一个Primise实例都有一个最基本的过程，从挂起到解决，或者从挂起到拒绝

承诺的基本用法

承诺的用法

var p=Promise.all([p1，p2，P3])；All()以数组作为参数。P1、p2和p3都是Promise的实例对象。要成为“已解决”状态，p需要解决P1、p2和P3。如果P1、p2和P3中至少有一个被拒绝，p将被拒绝

诺言的用法。种族()

Var p=new Promise([p1，p2，p3])只要p1，p2，p3中有一个实例率先改变状态，P的状态也会随之改变。首先改变的Promise实例的返回值被传递给p的回调函数，p的状态将改变Resolved状态

承诺解决()用法

Promise.resolve('foo')//相当于new promise(resolve=resolve(' foo ')。有时需要将现有的对象转换为promise对象，promise.resolve方法扮演了这个角色。

承诺拒绝的用法()

Promise.reject('foo')//相当于newPromise (reject=reject ('foo ')。承诺。reject (reason)方法还返回一个状态为“已拒绝”的新承诺实例。但是，Promise.reject()方法的参数将用作拒绝的原因，并成为后续方法的参数。这与Promise.resolve方法不一致。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。