Axios网络框架

一、axios网络框架

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

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

安装

npm i axios -s

二、axios的使用

axios支持的请求方式

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 发送简单的网络请求

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

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

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参数的请求：

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封装过的

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

例如

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提供的方法来做

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

2.4 全局配置

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

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

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

axios.default.timeout = 5000

2.5 常用的配置项

1. 请求地址

url:'地址'

2. 请求类型

method:''

3. 请求根路径

baseURL:'根路径'

4. 请求前的数据处理

transformRequest:[function(data){}]

5. 请求后的数据处理

transformResponse:[function(data){}]

6. URL查询对象

params:{}

7. 自定义的请求头

headers:{'x-Requested-width':'XMLHttpRequest'}

8. 查询对象序列化函数

paramsSerializer: function(params){}

9. request body

data:{key:value}

10. 超时设置

timeout: 1000   //ms

11. 跨域是否带Token

withCredentials: false

12. 自定义请求处理

adapter: function(resolve, reject, config){}

13. 身份验证信息

auth: { uname:'',pwd: '12'},

14. 响应的数据格式json / blob /document /arraybuffer / text, stream

responseType: 'json'

三、axios实例封装

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

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

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

使用实例发起请求

instance({
    Config //特有配置项
})
.then(res => {
    ....
})

3.1 请求实例独立封装

在文件中统一定义

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

network
    request.js

封装样例request.js

import axios from 'axios'

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

调用样例main.js

import {request} from './network/request'
request({
  url:'/api/v1/home/data',
  params:{
    type:'sell',
    page:1
  }
})
.then(res => {
  console.log(res)
})

四、拦截器

axios.interceptors

4.1 请求拦截

axios.interceptors.request

功能：

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

例如

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

4.2 响应拦截

axios.interceptors.response

在完成响应时进行拦截

instance.interceptors.response.use(config => {
    console.log('加载成功')
    return config.data
},err => {
    console.log(err)
})