axios学习笔记

axios的基本使用

默认是get请求，params是为get请求传参时使用

axios({
  url: '',
  params: {

  }
}).then(res => {
  console.log(res)
})

axios发送并发请求

axios.all()

axios.all([axios(
  {
    url: ''
  }
), axios({
  url: '',
  params: {}
})]).then(result => {
  console.log(result)
})

result 为第一个请求返回的数据和第二个请求返回数据的数组集合

axios.all([axios(
  {
    url: ''
  }
), axios({
  url: '',
  params: {}
})]).then(axios.spread((res1, res2) => {
  console.log(res1)
  console.log(res2)
}))

axios.spread可以分别返回两个请求的数据

axios的基本配置

使用全局配置

axios.defaults.baseURL = 'http://'
axios.defaults.timeout = 5000

但是有可能不同的网络请求所请求的服务器地址不同，所以可以采用创建axios实例的方式。
axios.creat()

// 创建axios实例
// axios.create()
const instance1 = axios.create({
  baseURL: 'httpbin.org/',
  timeout: 5000
})

// 无参数
instance1({
  url: '/home'
}).then(res => {
  console.log(res)
})

// 有参数
instance1({
  url: '/hello',
  params: {
    page_no: 1
  }
}).then(res => {
  console.log(res)
})

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

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

instance2({
  url: '/upload',
  params: {

  }
}).then(res => {
  console.log(res)
})

axios拦截器

axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理。

1. 请求拦截（请求成功拦截、请求失败拦截）

请求拦截的应用场景

1. config中的一些信息不符合服务器的要求
2. 每次发送网络请求时，都希望在界面中显示一个请求的图标
3. 某些网络请求（比如登录（token）），必须携带一些特殊的信息

instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log(err)
  })

2. 响应拦截（响应成功拦截、响应失败拦截）

instance.interceptors.response.use(res => {
  console.log(res)
}, err => {
  console.log(err)
})

网络请求文件

request.js

import axios from 'axios'

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

  // 2.1 请求拦截
  /* 请求拦截的几个应用场景：
      > 1. config中的一些信息不符合服务器的要求
      > 2. 每次发送网络请求时，都希望在界面中显示一个请求的图标
      > 3. 某些网络请求（比如登录（token）），必须携带一些特殊的信息
   */

  instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log(err)
  })
  // 2.2 相应拦截
  instance.interceptors.response.use(res => {
    console.log(res)
    return res.data
  }, err => {
    console.log(err)
  })

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