axios二次封装及api管理

二次封装axios

import axios from "axios";

const instanse = axios.create({
  // 公共前缀
  baseURL: "http://192.168.0.1",
  timeout: 5000
})


// 添加请求拦截器
instanse.interceptors.request.use(function (config) {
  // config对象，记录了本次请求的详细信息
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instanse.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  return Promise.reject(error);
});


export default instanse

api统一管理

1. 以函数的形式导出api，防止引入api文件时，一次性请求所有api。

   使用方法：

   api1().then(res=>res)
   

2. instanse已经设置了公共前缀 http://192.168.0.1，故请求可以用相对地址

import instanse from "./request";

// http://192.168.0.1/a/b
export const api1 = ()=> instanse.get("/a/b")

// http://192.168.0.1/c/d
export const api2 = ()=> instanse.get("/c/d")

vue中使用

import {api1} from "@/request/api"
export default {
  data() {
    return {
      
    }
  },
    
  // 方式1 
  //created(){
  //  api1().then(res=>{
  //    console.log(res);
  //  })
  //},
  
  // 方式2
  async created(){
    await let res = api1()
  },
}