网络模块封装——axios

目录

axios功能特点

axios框架的基本使用

支持多种请求方式：

 安装axios

axios发送并发请求

 axios的全局配置

 axios的实例

模块封装

axios拦截器

完整的axios代码

学习指路

---

axios功能特点

1. 在浏览器中发送XMLHttpRequests请求
2. 在node.js中发送http请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 等等

axios框架的基本使用

支持多种请求方式：

1. axios(config)
2. axios.request(config)
3. axios.get(url[, config])
4. axios.delete(url[, config])
5. axios.head(url[, config])
6. axios.put(url[, data [, config]])
7. axios.post(url[, data [, config]])
8. axios.patch(url[, data [, config]])

 安装axios

1. 使用vue脚手架创建一个项目
2. npm install axios --save 
3. 注意：项目名字不能命名为axios，否则无法安装axios框架

现主要第一种方式（默认发送get请求）

import axios from 'axios'

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

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

axios发送并发请求

有时候，我们可能需要同时发送两个请求

使用axios.all()，可以放入多个请求的数组

axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为res1,res2

//  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: "pop",
        page: 1,
      },
    }),
  ])
  // .then((results) => {
  //   console.log(results);
  // });
  .then(
    axios.spread((res1, res2) => {
      console.log(res1);
      console.log(res1);
    })
  );

 axios的全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000';

axios.defaults.timeout = 5000

 axios的实例

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

1. 当我们从axios模块中导入对象时，使用的实例是默认的实例
2. 当给该实例设置一些默认配置时，这些配置就被固定下来了
3. 但是在后续开发中，某些配置可能会不太一样
4. 比如某些请求需要使用特定的baseURL或者timeout或者content-Type
5. 这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息

 

// 创建对应的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:'另外一个url的地址'
})

instance2({
  url:'地址'
})

模块封装

在src文件夹下创建network文件夹下创建request.js文件

import axios from 'axios'
export function request(config) {
  // 1 创建axios实例
  const instance1 = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000
  });
  // 发送真正的网络请求
  return instance1(config)
}

return instance1(config) 返回的是axiospromise对象，所以在使用的时候可以直接request().then(()=>{}).catch(()=>{})

使用，这里以在main.js文件中为例

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

axios拦截器

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

那...如何使用拦截器呢？

  // 2 配置请求和响应拦截
  instance1.interceptors.request.use(config => {
    console.log('来到了request拦截success中');
    // 拦截作出改变之后，要记得返回
    return config
  }, err => {
    console.log('来到了request拦截failure中');
    return err
  })

  instance1.interceptors.response.use(response => {
    console.log('来到了response拦截success中');
    // 对响应的数据进行过滤，只想拿到数据
    return response.data;
  }, err => {
    console.log('来到了response拦截failure中');
    return err
  })

请求拦截的作用

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

完整的axios代码

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


  // 2 配置请求和响应拦截
  instance1.interceptors.request.use(config => {
    console.log('来到了request拦截success中');
    // 拦截作出改变之后，要记得返回
    return config
  }, err => {
    console.log('来到了request拦截failure中');
    return err
  })

  instance1.interceptors.response.use(response => {
    console.log('来到了response拦截success中');
    // 对响应的数据进行过滤，只想拿到数据
    return response.data;
  }, err => {
    console.log('来到了response拦截failure中');
    return err
  })

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

学习指路

vuex学习