vue axios 网络请求的封装

vue axios 网络请求的封装

为了代码更容易管理，对网络请求进行一系列的封装

1. 安装依赖

npm install axios --save

2. 封装
   ~在src目录文件下新建 reqest 文件夹
   ~reqest文件下 新建reqest.js
   
   request.js 代码

import axios from "axios";

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

    // 2.axios拦截器
    // 2.1请求拦截的作用
    instance.interceptors.request.use(
        config => {
            console.log(config);
            // 1.比如config中的一些信息不符合服务器的要求
            // 2.比如每次发送网络请求时，都希望在界面显示一个请求的图标
            // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
            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);
}

3. 二次封装
   ~reqest文件下 新建 js文件，如 home.js
   代码如下

import { request } from "./request";

export function getHomeListData() {
    return request({
        url: "/home/multidata"
    });
}

export function getHomeGoodsData(type, page) {
    return request({
        url: "/home/data",
        params: {
            type,
            page
        }
    });
}

4. 调用
   ~引入

import { getHomeListData, getHomeGoodsData } from "request/home";

~使用

  created () {
    this.getHomeListData();
  },

    getHomeListData () {
      getHomeListData().then(res => {
        console.log(res.data.banner.list);
        this.swiperData = res.data.banner.list;
      });
    },