VUE axios封装

二次封装工具

创建 axios.js 文件

import axios from "axios";//原生的axios
//用来拦截用的
axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";

// axios.defaults.withCredentials = true // 是否跨域

//创建一个单例
const http= axios.create({
  baseURL:'http://localhost:8088', // 接口地址
  timeout:5000,//响应时间

  //headers:{"Content-Type":"application/json;charset=utf-8"},
})

//拦截器  -请求拦截
http.interceptors.request.use(config=>{
  console.log("请求");
  //部分接口需要token
  let token=localStorage.getItem('token');
  if(token){
    config.headers.token=token;
    // config.headers ={
    // 'token':token
    // }
  }
  return config;
},err=>{
  return Promise.reject(err)
})

//拦截器  -响应拦截
http.interceptors.response.use(res=>{
  console.log(res);
  console.log("相应");
  if(res.data.code===2000){
    return Promise.resolve(res.data)
    //这里读者们可以根据服务器返回的数据去自行修改
  }else{
    return Promise.reject(res.data)
  }
},err=>{
  return Promise.reject(err)
});

//整体导出
export default http;
 

调用API

import request from '@/router/axios'//导入已经写好的拦截器

// 封装所有的API接口

export function x1(){
  console.log("-------");
  return request({
    url:'/api/x1',
    method :'get',
    //params:params,
  })
}

export function x2(xx){
  console.log("-------");
  return request({
    url:'/api/x2?xx='+xx,
    method :'post',
  })
}

export function x3(name){
  console.log("-------");
  return request({
    url:'/api/x3',
    method :'post',
    data:{
      name
    }
  })
}