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