【Vue】封装axios

Vue-Axios的二次封装

axios官方文档

安装axios

---

npm install axios

封装

---

新建api文件夹，并建立base.js、request.js、index.js

base.js

export default {
  base:'http://localhost:3000',
  login:'/api/login'
}

Request.js

// 此时，封装axios
import axios from "axios";

const install = axios.create({
  baseURL:'',//主要作用是，在请求的地址前面加上基础路径
  timeout:5000,// 超时时间 毫秒
  headers: {'X-Custom-Header': 'foobar'} //设置请求头
})

/**
 * 请求拦截
 * @param config 请求参数
 */
install.interceptors.request.use(config=>{
  return config;
})

/**
 * 请求返回拦截
 * @param resp 返回的数据
 */
install.interceptors.response.use(resp=>{
  return resp;
})

export default install;

Index.js

import base from "./base";
import req from './request'

/**
 * 登录
 * @param {*} param 参数对象 {username:xxx.password:***}
 * @returns 
 */
const toLogin = (param)=>req.get(base.login,{params});

之后便可以在组件中直接引用了。。。。未完待续