Axios网络框架

发表于 | 分类于 | 评论数：
本文字数： 21k | 阅读时长 ≈ 19 分钟

一、axios网络框架

  • 包含了对XMLHttpRequest浏览器的支持
  • 能够在node.js环境中发起http请求
  • 支持Promise API
  • 支持拦截请求和响应
  • 支持转换请求和响应数据
  • 支持取消请求
  • 支持自动转换JSON数据

axios更适合在Vue框架中使用，如果使用ajax需要引用整个jquery，而一个jquery的大小都快抵上Vue框架的大小了，所以在Vue中使用ajax来发送网络请求并不合适。而使用原始的XMLHttpRequest来发送请求又过于繁琐了。所以更推荐axios。

安装

1
npm i axios -s

二、axios的使用

axios支持的请求方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
axios(config)

axios.request(config)

axios.get(url[,config])

axios.delete(url[,config])

axios.head(url[,config])

axios.post(url[,data[,config]])

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

2.1 发送简单的网络请求

1
2
3
4
axios({
    url:'xxxx',
    method:'post'  //该项为可选，如无该项则默认为get请求
})

axios都是经过promise对象封装的，所有可以大胆的使用promise的方法

1
2
3
4
5
6
axios({
  url:'http://123.207.32.32:8000/api/v1/home/multidata',
  method:'get'
}).then(res =>{
  console.log(res)
})

2.2 发送带query参数的请求

发送http://123.207.32.32:8000/api/v1/home/data?type=sell&page=1这种带有query参数的请求：

1
2
3
4
5
6
7
8
9
axios({
  url:'http://123.207.32.32:8000/api/v1/home/data',
  params:{
      type:'sell',
      page:1
  }
}).then(res =>{
  console.log(res)
})

2.3 发送并发请求

当需要同时发送多个请求时，可以使用all方法，这个方法其实就是promise中的all方法，毕竟axios都是经过promise封装过的

1
2
3
4
5
6
7
axios.all([
    axios(...),
    axios(...)
])
.then(res=>{
   console.log(res)   //[请求结果1，请求结果2]
})

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
axios.all([
  axios({
    url:'http://123.207.32.32:8000/api/v1/home/multidata?callback=json123',
    method:'get'
  }),
  axios({
    url:'http://123.207.32.32:8000/api/v1/home/data',
    params:{
        type:'sell',
        page:1
    }
  })
])
.then(([res1,res2])=>{
  console.log(res1,res2)
})

关于then中返回的请求结果res，我是做了一个数组的解构。除此之外更推荐使用axios提供的方法来做

1
2
3
.then(axios.spread((res1,res2)=>{
  console.log(res1,res2)
}))

2.4 全局配置

axios为需要全局配置的属性提供了方法

1
axios.default.xxx= xxx   //为需要全局配置的属性赋值

例如为全局的axios请求默认的请求时长设置为5秒

1
axios.default.timeout = 5000

2.5 常用的配置项

  1. 请求地址
1
url:'地址'
  1. 请求类型
1
method:''
  1. 请求根路径
1
baseURL:'根路径'
  1. 请求前的数据处理
1
transformRequest:[function(data){}]
  1. 请求后的数据处理
1
transformResponse:[function(data){}]
  1. URL查询对象
1
params:{}
  1. 自定义的请求头
1
headers:{'x-Requested-width':'XMLHttpRequest'}
  1. 查询对象序列化函数
1
paramsSerializer: function(params){}
  1. request body
1
data:{key:value}
  1. 超时设置
1
timeout: 1000   //ms
  1. 跨域是否带Token
1
withCredentials: false
  1. 自定义请求处理
1
adapter: function(resolve, reject, config){}
  1. 身份验证信息
1
auth: { uname:'',pwd: '12'},
  1. 响应的数据格式json / blob /document /arraybuffer / text, stream
1
responseType: 'json'

三、axios实例封装

实际开发中,会遇到需要提供大量不同axios请求,且这些请求可能出现比较高的重复性,配置项只有一小部分不同,此时,我们可以将重复出现的不同请求抽离并封装起来

axios提供了实例封装方法axios.create

1
2
3
const instance = axios.create({
    baseConfig  //抽离出来的公共配置项
})

使用实例发起请求

1
2
3
4
5
6
instance({
    Config //特有配置项
})
.then(res => {
    ....
})

3.1 请求实例独立封装

在文件中统一定义

请求的实例的定义可以放在独立的文件中,以供调用，并且易于统一管理。

1
2
network
    request.js

封装样例request.js

1
2
3
4
5
6
7
8
import axios from 'axios'

export function request(config) {
    const instance = axios.create({
        baseURL:'http://123.207.32.32:8000'
    })
    return instance(config)
}

调用样例main.js

1
2
3
4
5
6
7
8
9
10
11
import {request} from './network/request'
request({
  url:'/api/v1/home/data',
  params:{
    type:'sell',
    page:1
  }
})
.then(res => {
  console.log(res)
})

四、拦截器

1
axios.interceptors

4.1 请求拦截

1
axios.interceptors.request

功能：

  • 比如config中的数据不符合服务器的要求
  • 比如每次发送网络请求时，都希望在网页中加入等待图标
  • 某些网络请求，例如token,必须携带一些特殊的信息

例如

1
2
3
4
5
6
axios.interceptors.request.use(config => {
    console.log(config)
    return config   //一定要return config,否则请求将无法继续往下执行
},err => {
    console.log(err)
})

4.2 响应拦截

1
axios.interceptors.response

在完成响应时进行拦截

1
2
3
4
5
6
instance.interceptors.response.use(config => {
    console.log('加载成功')
    return config.data
},err => {
    console.log(err)
})
0%