Axios实际Vue项目运用

1.request.js封装(所有模块都可使用)

import axios from 'axios'

export function request(config) {
    // 1.创建axios的实例
    const instance = axios.create({
        baseURL: 'a',
        timeout: 5000
    })
    // 2.axios的拦截器
    
    // 2.1 什么情况下需要进行拦截 =》 1.比如config中的一些信息不符合服务器要求。  2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标   3.某些网络请求，比如登陆，必须要携带一些特殊的信息
    
    // axios.interceptors    // 全局拦截器
    // instance.interceptors     // 只拦截instance这个实例

    // 2.2 请求拦截
    instance.interceptors.request.use(aaa => {   // 返回的参数（各种配置），名字可以自己命名，这个并不是数据信息，数据信息在main.js中打印
      console.log("返回配置信息",aaa);
      return aaa    // 这里的aaa一定要返回出去
    },err => {   // 错误信息，如果请求都没有发送出去，就会来到这里
      console.log("错误信息",err);
    })     // 拦截instance这个实例的请求,use是使用的意思,有两个参数，两个参数都是函数

    // 2.3 响应拦截 
    instance.interceptors.response.use(res => {  // 由于服务器已经响应过了，所以这里拿到的是结果，而不是配置信息
      console.log("返回的数据",res);
      return res.data   // 将想要的结果返回
    },err => {    // 获取失败
      console.log("错误信息",err);
    })     // 拦截instance这个实例的响应,use是使用的意思

    // 3.发送真正的网络请求
    return instance(config)   // 实际上返回一个promise
}

2.某个模块再次封装，比如首页home.js

import { request } from "./request";

export function getHomeData() {
  return request({
    url: '/b/c'
  })
}

3.home.vue中的使用，引入home.js

import {
  getHomeData
} from "network/home";
export default {
  name: 'Home',
  data() {
    return {
      banner: [],// 轮播图数据
      recommend: [],// 推荐信息数据
      keywords: [],
    };
  },
  created() {
    // 请求数据,下面的res就是通过接口拿到的数据，实际数据结构，要看接口返回来的为准
    getHomeData().then(res => {
      this.banner = res.data.banner.list
      this.recommend = res.data.recommend.list
      this.keywords = res.data.keywords.list
    })
  }
};