1. axios 的特点

  • 在浏览器中发送 XMLHttpRequests 请求
  • 在 node.js 中发送 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据

2. 请求方式

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]])

3. 基本使用

npm install axios --save

import axios from 'axios'

axios({
  url:'',
  params:{}
}).then(res => {})

4. 发送并发请求

axios.all([axios({}), axios({})])
.then(results => {
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})

使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

axios.all([axios({}), axios({})])
.then(axios.spread((res1, res2) => {}))

5. 全局配置

axios.defaults.baseURL = '123.207.32.32:8000'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

常见的配置选项

请求地址：url: '/user'

请求类型：method: 'get'

请求根路径：baseURL: 'http://www.mt.com/api'

请求前的数据处理：transformRequest:[function(data){}]

请求后的数据处理：transformResponse: [function(data){}]

自定义的请求头：headers:{'x-Requested-With':'XMLHttpRequest'}

URL查询对象：params:{ id: 12 }

查询对象序列化函数：paramsSerializer: function(params){ }

request body：data: { key: 'aa'}

超时设置：timeout: 1000

跨域是否带 Token：withCredentials: false

自定义请求处理：adapter: function(resolve, reject, config){}

身份验证信息：auth: { uname: '', pwd: '12'}

响应的数据格式：json / blob /document /arraybuffer / text / stream

responseType：'json'

6. axios 的实例

为什么要创建 axios 的实例呢?

当我们从 axios 模块中导入对象时, 使用的实例是默认的实例。
当给该实例设置一些默认配置时, 这些配置就被固定下来了。

但是后续开发中, 某些配置可能会不太一样。
比如某些请求需要使用特定的 baseURL 或者 timeout 或者 content-Type 等。

这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息。
这样就可以使用两个不同配置的 axios 实例来进行发送不同默认配置的请求。

// 创建对应的axios的实例
const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})

const instance2 = axios.create({
  baseURL: 'http://222.111.33.33:8000',
  timeout: 10000,
  // headers: {}
})

instance1({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
})

instance2({
  url: '/home/multidata2'
}).then(res => {
  console.log(res);
})

7. 封装 axios

为什么需要封装？

当有一天框架不再维护或者需要更换框架的时候，我们只需要更改自己封装的函数即可，不需要每个文件都做更改。

// 创建 src/network/request.js

import axios from 'axios'

export function request(config) {
  // 创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 发送真正的网络请求,axios 返回的就是 Promise
  return instance(config)
}

8. 拦截器

axios 拦截器分为四种:

  • 请求成功拦截
  • 请求失败拦截(很少出现，比如没网的时候，请求超时)
  • 响应成功拦截
  • 响应失败拦截
import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    // 1.比如config中的一些信息不符合服务器的要求
    // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
    // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
    return config
  }, err => {
    // console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    // 筛选自己需要的信息
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}