关于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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。