写点什么

vue-axios(三)

作者:小恺
  • 2022 年 7 月 01 日
  • 本文字数:1052 字

    阅读完需:约 3 分钟

并发请求

有时需要同时向服务端发起多个请求,这可以利用 axios 库提供的并发请求助手函数来实现

代码如下:

function getUserAccount(){
return axios.get('url')
}
function getUserPermissions(){
return axios.get('url')
}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function (acct,perms){
}))
复制代码

acctgetUserAccount()方法请求的响应结果

permsgetUserPermissions()方法请求的响应结果

创建实例

可以使用自定义配置调用 axios.create([config])方法来创建一个 axios 实例,之后使用该实例向服务器发起请求,就不用每次请求是重复设置配置选项了

代码如下:

const instance=axios.create({
baseURL:url,
timeout:1000,
headers:{'X-Custom-Header':'foobar'}
})
复制代码

配置默认值

对于每次请求相同的配置选项,可以通过配置选项设置默认值来简化代码的编写。项目中使用到的全局 axios 默认值可以在项目的入口文件 main.js 中进行配置

代码如下:

axios.defaults.baseURL = 'url'axios.defaults.headers.common['Authorzaiion']=AUTH_TOKENaxios.defaults.headers.post['Content-Type']='application/x-www-from-urlencoded'axios.defaults.withCredentials=true
复制代码

也可以在自定义实例中设置配置默认值,这些配置选项只有在使用该实例发起请求时才生效。

代码如下:

//创建实例时设置默认值const instance=axios.create({    baseURL:URL})//实例后设置配置默认值instance.defaults.headers.common['Authorizaiion']=AUTH_TOKEN
复制代码

拦截器

有时需要统一处理 http 的请求和响应,axios 拦截器的使用

代码如下:

添加请求拦截器

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)})
复制代码

自定义的 axios 实例添加拦截器

const instance=axios.create()instance.interceptors.request.use(function(config){    return config},function(error){    return Promise.reject(error)})
复制代码

移除拦截器

const myInterceptor=axios.interceptors.request.use(function(config){    return config},function(error){    return Promise.reject(error)})axios.interceptors.request.eject(myInterceptor)
复制代码


服务端通信的 axios 库的使用已经讲完了,该库的使用并不复杂,不过由于需要服务端提供数据访问接口,没有代码演示

用户头像

小恺

关注

还未添加个人签名 2021.02.22 加入

还未添加个人简介

评论

发布
暂无评论
vue-axios(三)_7月月更_小恺_InfoQ写作社区