关于axios:axios模块化封装简洁版

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们会进行数据的申请, 我应用的是 axios, 上面我来分享一下我本人的封装配置, 心愿对你有所帮忙。
4. 废话不多说, 间接上操作:

npm i axios --sve

5. 在 src 目录新建文件夹 network, 目录构造如下:

6.https.js 代码如下:

import axios from 'axios'
import qs from "qs"
let http1=(config)=>{
  const instance=axios.create({
    baseURL:"http://192.168.1.115:3000",
    timeout:5000
  })

  instance.interceptors.request.use((config) => {if(config.method=="get"){// console.log("我是输入");
        // console.log("我是输入完结啦");
        config.url=config.url+'?'+config.data;
    }
    // console.log("申请拦挡胜利啦");
    // console.log(config);
    return config;
  }, (err) => {console.log("拦挡失败啦");
    console.log(err);
  })

  // 
  instance.interceptors.response.use((res) => {
    // 响应拦挡胜利
    // console.log("响应拦挡胜利");
    // console.log(res);
    // console.log(res.data);
    return res.data;
    // 留神: 在这里要把 (想要的数据) 返回
  }, (err) => {console.log("响应拦挡失败");
    console.log(err);
  })
  return instance(config);
}

let http2=(config)=>{
  const instance=axios.create({
    baseURL:"http://192.168.1.115:9000",
    timeout:5000
  })
  instance.interceptors.request.use((config) => {if(config.method=="get"){// console.log("我是输入");
        // console.log("我是输入完结啦");
        config.url=config.url+'?'+config.data;
    }
    // console.log("申请拦挡胜利啦");
    // console.log(config);
    return config;
  }, (err) => {// console.log("拦挡失败啦");
    console.log(err);
  })
  

  // 
  // 响应拦挡:
  instance.interceptors.response.use((res) => {
  // 响应拦挡胜利
  // console.log("响应拦挡胜利");
  // console.log(res);
  // console.log(res.data);
  return res.data;
  // 留神: 在这里要把 (想要的数据) 返回
}, (err) => {// console.log("响应拦挡失败");
  console.log(err);
})
  
  return instance(config);
}

export {
  http1,
  http2
}

// 创立不同的实例, 起因: 解决接口不在一个服务器上

7.api.js 接口的治理代码如下:

import {http1, http2} from "@/network/https";
import qs from "qs";
let clogin = (value) => {
  return http1({
    url: "/api/login",
    method: "get",
    data: qs.stringify(value, { indices: false}),
  });
};

let clogin2 = (value) => {
  return http2({
    url: "/api/login",
    method: "get",
    // data: qs.parse(value),
    data: qs.stringify(value, { indices: false}),
  });
};

export {clogin, clogin2};

8. 在 vue 模板中应用:

import {clogin, clogin2} from "@/network/api";

clogin().then((res) => {console.log(res);
});
 clogin2().then((res) => {console.log(res);
});

// 返回接口为:

// 和后盾的是统一的

9.get 传参:

let a = {
 l: "99",
 k: "pp",
};
clogin(a).then((res) => {console.log(res);
});

10.post 传参:

let a = {
 l: "99",
 k: "pp",
};
clogin(a).then((res) => {console.log(res);
});

11. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。