axios

三十二、axios

1、安装

npm i axios --save

2、基本使用

import axios from 'axios'

//axios的基本使用
axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  // method: 'post'
}).then(res => {
  console.log(res);
})

3、axios请求方式

4、get请求

axios({
  url: 'http://123.207.32.32:8000/home/data？type=pop&page=1'
}).then(res => {
  console.log(res);
})

axios({
  url: 'http://123.207.32.32:8000/home/data',
  // 专门针对get请求的参数拼接
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})

5、发送并发请求

//axios发送并发请求
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}), axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(results => {
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})

6、全局配置

在开发中可能很多参数都是固定的，这个时候我们可以利用axiox的全局配置，进行一些抽取

//使用全局的axios和对应的配置在进行网络请求
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

axios.all([axios({
  url: '/home/multidata'
}), axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))

常见配置选项

7、创建对应的axios实例

当需要请求的服务器为多个时，全局配置便不实用，这时就要创建对应的axios实例

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

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

instance1({
  url: '/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})


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

8、模块封装

// 5.封装request模块
import {request} from "./network/request";

request({
  url: '/home/multidata'
  }, res => {
   console.log(res);
  }, err => {
   console.log(err);
})

request.js

import axios from 'axios'

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

  // 发送真正的网络请求
  instance(config)
    .then(res => {
      // console.log(res);
      success(res);
    })
    .catch(err => {
      // console.log(err);
      failure(err)
    })
}

Promise 封装

// 5.封装request模块
import {request} from "./network/request";

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

request.js

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

    // 发送真正的网络请求
    instance(config)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
      })
  })
}

但axios 本身返回的就是Promise，所有上面的封装没有意义，直接返回instance(config)即可

return instance(config)

9、拦截器

9.1、请求拦截

// 2.axios的拦截器
// 2.1.请求拦截的作用
instance.interceptors.request.use(config => {
  // console.log(config);
  // 1.比如config中的一些信息不符合服务器的要求

  // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标

  // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
  return config
}, err => {
  // console.log(err);
})

9.2、响应拦截

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