唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > axios相关配置及其与vue-axios关系

axios相关配置及其与vue-axios关系

2019-07-14 分类：Vue.js专区 作者：管理员 阅读（1159）

axios的相关配置还是比较多的，相关的帖子也很多，但很多同学看完了后还是似懂非懂，所以在此提炼下一些常用核心的东西出来，剔除糟粕，吸取精华。

基本用法

默认方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// 获取远程图片get请求
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

请求方法别名

1
2
3
4
5
6
7
8
9
10
//为了方便我们为所有支持的请求方法均提供了别名。
axios.get(url[, config])
axios.post(url[, data[, config]])
axios.request(config)
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
//注意当使用以上别名方法时，url，method和data等属性不用在config重复声明。

（通过别名）发起一个GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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)
});

（通过别名）发起一个POST请求

1
2
3
4
5
6
7
8
9
10
axios.post('/user',{
    firstName:'friend',
    lastName:'Flintstone'
})
.then(function(response){
    console.log(response);
})
.catch(function(error){
    console.log(error);
});

发起一个多重并发请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function A(){
    return axios.get('/user/12345');
}

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

axios.all([A(),B()])
.then(axios.spread(function(res1,res2){
    //两个请求现在都完成，可以拿到对应两个返回值res1,res2
}))
.catch(err=>{
    //注意，错误只会接收到一个，因为只要有一个出错，另一个请求根本不会发出
});

配置参数

请求设置

以下列出了一些请求时的设置选项。只有url是必须的，如果没有指明method的话，默认的请求方法是GET.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
{
    //`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){
    })
}

怎么创建axios实例

你可以使用自定义设置创建一个新的实例，axios.create([config])，实例方法和之前提到的别名下是一样的

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

为什么要创建这样一个实例？主要就是在有些时候我们想在不改变全局的axios配置下去弄一个实例出来，通过这个实例，我们就有了单独的一个配置，通过这个实例发出请求，可以带上我们单独一套配置而又不去改变默认配置，却可以在使用这个实例发出请求下覆盖默认配置。如果不明白？没事，看下面：

1、全局修改axios默认配置

1
2
3
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';

2、实例配置

1
2
3
4
5
6
7
// 创建实例时修改配置
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 实例创建之后修改配置
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

3、配置优先级

配置项通过一定的规则合并，request config > instance.defaults > 系统默认，优先级高的覆盖优先级低的。

1
2
3
4
5
6
7
8
9
10
// 创建一个实例，这时的超时时间为系统默认的 0
var instance = axios.create();

// 通过instance.defaults重新设置超时时间为2.5s，因为优先级比系统默认高
instance.defaults.timeout = 2500;

// 通过request config重新设置超时时间为5s，因为优先级比instance.defaults和系统默认都高
instance.get('/longRequest', {
  timeout: 5000
});

拦截器interceptors

全局拦截器就不用说了吧，直接通过axios.interceptors就可以，重点我们想某个请求用拦截器，那么我们应该创建axios实例去操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var HTTP = axios.create({
    baseURL:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/',
    timeout: 1000,
    responseType:'json',
    headers:{
      'custome-header': 'miaov',
      'content-type':'application/x-www-form-urlencoded'
    }
  })

HTTP.interceptors.request.use(function(config){
    //在发送请求之前做某事
    console.log("拦截")
    console.log(config)
    return config;
  },function(error){
    //请求错误时做些事
    return Promise.reject(error);
  });

  HTTP.interceptors.response.use(function(data){
      console.log("response")
      console.log(data)
      return data;
  })

如果你需要在稍后移除拦截器,你可以

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

取消请求Cancellation

1、你可以使用CancelToken.source工厂函数创建一个cancel token，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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("操作被用户取消");

2、你可以给CancelToken构造函数传递一个executor function来创建一个cancel token:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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('操作已被用户取消！')

3、你也可以给CancelToke的构造函数传递一个处理函数来生成一个cancel token

1
2
3
4
5
6
7
8
9
10
11
12
const CancelToken = axios.CancelToken
let cancel;

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

// 取消请求
cancel()

注意：你可以使用同一个cancel token取消多个请求。

aios和vue-axios关系

你完全不用担心，这东西学习？无成本，源码一共48行，vue-axios只是帮你在axios上面再封装了一层，让axios可以直接和Vue组装起来。原本你需要将axios挂在原型上去使用方式（Vue.prototype.$http = axios），这家伙自动帮你做了这么个事，而且给你提供了三种（如下）调用axios对象的方法，仅此而已，它并没有去过多做其他事情，vue-axios官网

main.js中

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import App from './App'
import router from './router'

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,Axios)

Vue.config.productionTip = false

组件中直接使用

1
2
3
4
5
6
7
8
9
10
11
Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

vue-axios插件有什么意义？

可能会有同学问这个问题，因为它所做的功能是那么的简单，而且我们平时通过Vue.prototype.$http = axios似乎也很简单的就完成了这个操作，那让它脱颖而出的原因到底是什么呢？

首先直接绑在原型链上不是不可以，这样注册一个$http，和项目其他成员协作的时候就必须注明你注册的变量名称，而使用vue-axios大家就没有歧义了。因为大家不需要看你的源码配置啥的互相都能遵循规则，说白了，使用vue-axios更多是为了符合规范，并且方便协作

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(2) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
赏 2

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签：

上一篇：

下一篇：

你可能感兴趣

共 0 条评论关于"axios相关配置及其与vue-axios关系"

博客简介

唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与，主题源码 

最近更新

随机文章

热门标签

caniuse兼容性 DaoVoice CDN大全 犸良动画 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线 lodash.js 视频压缩 vue视图更新 windows激活 机场客户端 Eruda

精彩评论

友情链接

他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！申请交换友链

站点统计

  • 文章总数： 259 篇
  • 草稿数目： 0 篇
  • 分类数目： 16 个
  • 独立页面： 6 个
  • 评论总数： 913 条
  • 链接总数： 17 个
  • 标签总数： 461 个
  • 注册用户： 8421 人
  • 访问总量： 9300256 次
  • 最近更新： 2020年8月6日
服务热线：
 173xxxx7240

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息