前端VUE请求之axios二次封装

步骤一：安装axios库

// 安装 axios 库
 npm install axios

步骤二：新建一个 JS 文件用来配置 Axios 的数据。

// 引入安装的 Axios
import axios from 'axios'
// 创建 axios 实例对象
const instance = axios.create({
  //作为请求接口的跟路径 后面instance发送请求的时候 会自动拼装上baseURL
  baseURL: 'http://localhost:8080/elemrg',
});
// 添加请求拦截器 后台验证不同的请求是否携带token  来判断是否返回什么数据
instance.interceptors.request.use((config) => {
  // 在发送请求之前做些什么？获取本地存储的token 
  let mytoken = localStorage.getItem('token')
  //放到Headers请求头里面 作为请求头参数传递
  if (mytoken) { config.headers.token = mytoken }
  return config;
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

//默认导出 一个js文件里面只能导出一个对象
export default instance

步骤三：项目中需要用到的请求方法进行封装。

// 引入已经封装好的axios方法
import instance from "../utils/request";
//1.注册接口的请求方法封装
export function register (data) {
  return instance({
    method: 'post',     //请求方式
    url: '/admin/register',  //已经添加了baseURL，所以这里只需要添加注册的register的路径
    data //根据属性名和属性值一致 可以简写
  })
}
//2.登录接口
export function login (data) {
  return instance({
    method: 'post',
    url: '/admin/login',
    data
  })
}

步骤四：对应页面直接引入使用即可

//引入api
import {register,login} from '@/api/admin.js'
methods:{
  // 在项目中需要用到引用该方法的地方直接调用该方法
   async showLogin(){
       let data = {}   // 如果该请求需要传递参数，将参数放在
       const {data:res} = await login(data)   // 调用封装好的请求方法
    }
}