axios

功能特点：

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

axios基本使用

1. 首先需要安装axios，npm stall aniox --save
2. 安装完成后，需要在main.js中导入并简单使用axios(config)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

createApp(App).use(store).use(router).mount('#app')

axios({
  url:'http://123.207.32.32:8000/home/multidata
}).then(res=>{
  console.log(res);
})

axios发送并发请求

在开发中需要有时同时发送多个网络请求，如何用axios发送？

axios也有一个all方法可以处理并发网络请求问题

axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata',
  }),
  axios({
    url:'http://123.207.32.32:8000/home/data',
    params:{
      type:"pop",
      page:5
    }
  })
]).then((result) =>{
  console.log(result);
})

axios也有一个spread方法，可以展开数组

axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata',
  }),
  axios({
    url:'http://123.207.32.32:8000/home/data',
    params:{
      type:"pop",
      page:5
    }
  })
]).then(axios.spread((result1,result2) =>{
  console.log(result1);
  console.log(result2);
}))

全局配置

在上面的实例中，BaseURL是固定的，这时候可以进行一些抽取，也可以利用axios的全局配置

axios.defaults.baseURL= "http://123.207.32.32:8000"
axios.defaults.timeout = 5000

axios.all([
  axios({
    url:'/ho
    me/multidata',
  }),
  axios({
    url:'/home/data',
    params:{
      type:"pop",
      page:5
    }
  })
]).then(axios.spread((result1,result2) =>{
  console.log(result1);
  console.log(result2);
}))

axios实例

在上述的网络请求中，都是进行的全局配置，但是不一定每一个数据都来源于同一个服务器IP地址，所以需要axios实例化，分类操作

const instance = axios.create({
  baseURL:"http://123.207.32.32:8000",
  timeout:3000
})  //创建axios实例

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

模块封装

单独在src中设置一个文件夹为network，然后在创建一个request.js文件

//request.js
import axios from 'axios'

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

可以这样使用：

request({
  url:"/home/multidata"
}).then(res =>{
  console.log("这是main.js中成功的request");
}).catch(err =>{
  console.log("这是main.js中失败的request");
})

拦截器

为什么要请求拦截：

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

为什么要响应拦截：

1. 请求到的返回数据中有许多是axios自行添加的，是我们所不需要的，就可以进行拦截过滤

请求拦截：

  instance.interceptors.request.use(config =>{

  },err =>{

  }) 
  

需要传入两个函数，第一个函数是成功时的处理。注意！一定要把数据返回

响应拦截：

  instance.interceptors.response.use(config =>{

  },err =>{

  })