vue axios封装

前言：

对第三方库进行二次封装和抽离到统一模块，项目面对自己的模块进行开发。如果有一天更换库，只需要修改自己模块中的代码，无需对整个项目进行重构。

将axios网络请求库封装到network文件下的request.js中，项目中所有网络请求相关，全部面对request.js开发。

---

 

一、vue目录结构

 

二、封装

import axios from "axios"

// 如果换axios框架，只需本页去掉axios相关，导入最新框架，return new Promise（）就可以，项目中其他文件依旧正常使用
export function request(config) {
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    });

  // 2. 拦截器(拦截之后进行对应操作，完成操作后需要返回回去)
  // 2.1请求拦截
    instance.interceptors.request.use(success =>{
      // 一般做1. 每次网络请求的时候都希望在界面中显示一个请求图标
                  //  2. 某些网络请求（比如登录（token）），必须携带一些特殊的信息 
      console.log(success);
      return success   // 操作完成后返回回去，不然main里面拿不到
    },err =>{
      // 发不出去请求的时候到这里，一般不会出现
      console.log(err)
    })
    
    //  2.2  响应拦截
    instance.interceptors.response.use(res =>{
      console.log('响应拦截');
      console.log(res.data);
      return res.data
    },err =>{
      console.log('拦截服务器响应错误')
      console.log(err)
    })

    // 发送网络请求
    return instance(config)
}

 

三、使用

// 需要网络请求的地方导入，使用
import {request} from "./network/request";

request({
  // url: '/home/multidata/aaaaaaaaaaaaa'         // 错误请求测试
  url: '/home/multidata'

}).then(res =>{
  console.log('main里面',res);
}).catch(err =>{
  console.log("main里面",err);
})