当前位置：首页 > news >正文

网站汉英结合的怎么做/云南网络推广公司排名

news 2025/8/5 10:18:29

网站汉英结合的怎么做,云南网络推广公司排名,wordpress 更改用户名,漯河做网站推广P16.1-axios网络请求封装文章目录P16.1-axios网络请求封装1.概述2.axios介绍2.1.axios名字介绍2.2.axios功能介绍3.axios安装与发送第一个get请求3.1.新建VueCLI2版本项目3.2.安装axios3.3.发送第一个get请求4.axios发送带参数的Get请求5.axios发送并发请求5.1. 第一种方式发送…

P16.1-axios网络请求封装

文章目录

P16.1-axios网络请求封装
- 1.概述
- 2.axios介绍
- - 2.1.axios名字介绍
  - 2.2.axios功能介绍
- 3.axios安装与发送第一个get请求
- - 3.1.新建VueCLI2版本项目
  - 3.2.安装axios
  - 3.3.发送第一个get请求
- 4.axios发送带参数的Get请求
- 5.axios发送并发请求
- - 5.1. 第一种方式发送并发请求
  - 5.2. 第二种方式发送并发请求
- 6.axios全局配置
- - 6.1.axios全局可配置项列表
  - 6.2.axios全局配置案例
- 7.创建axios实例与封装axios
- - 7.1.创建axios实例案例
  - 7.2.封装axios优点
  - 7.3.封装axios第一种方式
  - 7.4.封装axios第二种方式
  - 7.5.封装axios第三种方式
  - 7.6.封装axios终极方式
- 8.请求拦截器
- - 8.1.请求拦截器基本使用
  - 8.2.请求拦截器转发请求
  - 8.2.请求拦截器作用
  - 8.3.响应拦截器
  - 8.4.请求和响应拦截处理逻辑交给调用组件
- 9.axios完整代码总结

1.概述

Vue前端开发少不了向服务器请求数据，我们选择axios插件，他是一款功能强大，且易用的网络请求工具。下面我们就来介绍他。

2.axios介绍

2.1.axios名字介绍

axios 字母的全称是： ajax i/o system

2.2.axios功能介绍

axios功能特点

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据

支持多种请求方式

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

3.axios安装与发送第一个get请求

3.1.新建VueCLI2版本项目

安装axios前需要先创建一个VueCLI2版本项目，项目创建方式参考 P12.1-安装VueCLI2.x和3.x版本
新建VueCLI2版本项目名称可以自定义，或者使用和本篇文章相同的名称 learnaxios

1.新建VueCLI2版本项目初始结构

在这里插入图片描述

2.清理App组件不需要的内容

点击src文件夹，打开App.vue组件清理HelloWorld组件内容，以及style样式的配置。清理后内容如下

<template><div id="app"></div>
</template><script>export default {name: 'App',
}
</script><style></style>

3.删除HelloWorld.vue组件

在这里插入图片描述

4.验证项目启动是否正确
项目启动后，显示一个空白页面为项目启动正确。

# 进入项目跟路径
cd .\learnaxios\# 运行项目
npm run dev

在这里插入图片描述

3.2.安装axios

# 进入项目跟路径
cd .\learnaxios\# 运行项目
npm install axios --save

3.3.发送第一个get请求

在main.js文件中导入axios模块，然后给axios对象传递参数，参数的形式是对象格式。

在这里插入图片描述

请求服务器代码

import Vue from 'vue'
import App from './App'
//第一步导入axios模块
import axios from 'axios'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',render: h => h(App)
})//第二步使用axios发送网络请求
/* ---------1.axios基本使用--------- */
axios({// 请求服务器url地址url: 'http://123.207.32.32:8000/home/multidata'// then方法中处理请求服务器返回的数据
}).then(res => {console.log(res);
})

预览项目在控制台收到了服务器返回的数据

在这里插入图片描述

4.axios发送带参数的Get请求

Get请求的参数使用params属性，参数格式是对象形式。

// 发送待参数的get请求
axios({url: 'http://123.207.32.32:8000/home/data',// 专门针对get请求的参数拼接params: {type: 'pop',page: 1}
}).then(res => {console.log(res);
})

5.axios发送并发请求

当一个页面需要获取多个API请求返回的数据，这个时候就需要同时发送多个请求。下面介绍如何同时发送多个请求。

使用axios.all, 可以放入多个请求的数组.
axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

5.1. 第一种方式发送并发请求

这种方式在then方法中获取请求服务返回数据的时候，采用数组方式分别获取每个请求的结果。

// 发送并发请求
axios.all([axios({url: 'http://123.207.32.32:8000/home/multidata'}),axios({url: 'http://123.207.32.32:8000/home/data',params: {type: 'sell',page: 1}})
]).then(results => {// 返回两个请求的结果console.log(results);// 获取第一个请求的返回结果console.log(results[0]);// 获取第二个请求的返回结果console.log(results[1]);
})

5.2. 第二种方式发送并发请求

这种方式在then方法中获取请求服务返回数据的时候，使用 axios.spread 将数组 [res1,res2] 展开为 res1, res2

/* ---------4.发送并发请求使用spread获取每个请求的结果--------- */
axios.all([axios({url: 'http://123.207.32.32:8000/home/multidata'}),axios({url: 'http://123.207.32.32:8000/home/data',params: {type: 'sell',page: 1}})
]).then(axios.spread((res1, res2) => {console.log(res1);console.log(res2);
}))

6.axios全局配置

在上面的示例中, 我们的BaseURL是固定的

事实上, 在开发中可能很多参数都是固定的，这个时候我们可以利用axiox的全局配置将固定不变的内容抽离到配置中，在每次请求中就不需要在重写写这些固定不变的内容。

6.1.axios全局可配置项列表

axios可配置项图片版

在这里插入图片描述

axios可配置项文字版

请求地址

url: ‘/user’,

请求类型

method: ‘get’,

请根路径

baseURL: ‘http://www.mt.com/api’,

请求前的数据处理

transformRequest:[function(data){}],

请求后的数据处理

transformResponse: [function(data){}],

自定义的请求头

headers:{‘x-Requested-With’:‘XMLHttpRequest’},

URL查询对象

params:{ id: 12 },

查询对象序列化函数

paramsSerializer: function(params){ }

request body

data: { key: ‘aa’},

超时设置s

timeout: 1000,

跨域是否带Token

withCredentials: false,

自定义请求处理

adapter: function(resolve, reject, config){},

身份验证信息

auth: { uname: ‘’, pwd: ‘12’},

响应的数据格式 json / blob /document /arraybuffer / text / stream

responseType: ‘json’,

6.2.axios全局配置案例

下面的案例，将请求的URL地址设置配置项，请求超时时间设置配置项，在发送请求的时候就不需要再写这些重复的内容。

// 设置了全局配置后，已配置的内容在发送网络请求时就不用在重复写
axios.all([axios({url: '/home/multidata'}),axios({url: '/home/data',params: {type: 'sell',page: 5}})
]).then(axios.spread((res1, res2) => {console.log(res1);console.log(res2);
}))

7.创建axios实例与封装axios

为什么要创建axios的实例呢?

当我们从axios模块中导入对象时, 使用的实例是默认的实例.
当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样.
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

7.1.创建axios实例案例

在案例中创建了两个axios实例，并且分别为每个axios实例配置了该实例的全局配置。实现了两个axios分别请求两个服务器地址互不干扰。

/* ---------6.创建axios实例--------- */// 创建第一个axios实例对象 instance1
const instance1 = axios.create({// 配置instance1对象的全局配置baseURL: 'http://123.207.32.32:8000',timeout: 3000
})// 使用instance1对象发送网络请求
instance1({url: '/home/data',params: {type: 'pop',page: 1}
}).then(res => {console.log(res);
})// 创建第二个axios实例对象 instance2
const instance2 = axios.create({baseURL: 'https://httpbin.org/',timeoutL: 5000
})// 使用instance2对象发送网络请求
instance2({url: '/get'
}).then(res => {console.log(res);
})

7.2.封装axios优点

为什么要做封装

当我们直接拿axios在每个组件中使用，发送网络请求的时候，会出现下面的情景
- 每个组件页面都要写重复的导入axios和配置请求参数，如果有上百个组件那么要重复上百次。
- 当有一天axios插件不在维护了，那么上百个使用axios组件都需要维护，工作量非常大。

封装axios优点

当我们将axios做一层封装后，所有组件都只需要面向我们封装的组件进行开发。
当有一天axios插件不在维护了，只需要修改封装的组件即可避免大量的维护工作。

7.3.封装axios第一种方式

1.在src下新建一个文件夹network存放封装axios文件
2.在network文件夹下新建request.js文件封装asiox网络请求

import axios from 'axios'/* 第一种封装axios方式 */
export function request(config, success, failure) {// 1.创建axios实例const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})// 2.发送真正的请求/* - 创建axios实例后，在调用instance实例时需要传递三个参数，这三个参数就是创建request函数时定义的config, success, failure三个参数- config参数是第一个参数，这个参数是axios请求内容参数。- success参数是第二个参数，这个参数是一个回调函数，instance实例向服务器发送请求后，then接收服务器返回的数据需要交给调用instance实例的组件去处理，所以这里必须将将服务器返回数据抛出去，因此使用回调函数，then将接收到服务器返回的数据通过res参数传递给回调函数success，success函数中处理返回数据逻辑是由调用instance组件自己决定。这里只是将参数传入success函数，并且调用该函数。- failure参数是第三参数，这个参数也是一个回调函数，作用同success回调函数一样。区别是这个函数处理请求服务器返回的错误信息。*/instance(config)// 当请求服务器成功返回数据自动调用then函数.then(res => {success(res);})// 当请求服务器失败返回数据自动调用catch函数.catch(err => {failure(err);})
}

3.在main.js文件中调用request.js封装好的axios

/* ---------7.调用request.js文件中第一种方式封装axios--------- */
import { request } from './network/request'request({// 1.传入config参数url: '/home/multidata'},// 2.传入success参数res => {// 处理请求服务成功返回的数据console.log(res);},// 3.传入failure参数err => {// 处理请求服务失败返回的数据console.log(err);}
)

4.预览调用封装axios效果

在这里插入图片描述

7.4.封装axios第二种方式

1.在request.js中对第一种封装方式进行优化产生第二种封装方式

/* 第二种封装axios方式 */
/* 第一种方式定义request函数需要定义三个参数，我们可以优化下只定义一个config参数。在instance实例中通过config.baseConfig，config.success，config.failure替代第一种封装方式的config, success, failure三个参数*/
export function request(config) {// 1.创建axios实例const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})// 2.使用instance发送网络请求instance(config.baseConfig).then(res => {console.log('res===' + res);config.success(res);}).catch(err => {config.failure(err);})}

2.在main.js中调用第二种方式封装axios

/* ---------8.调用request.js文件中第二种方式封装axios--------- */
import { request } from './network/request'request({//第一个参数baseConfig: {url: '/home/multidata'},//第二个参数success: function(res) {console.log(res);},//第三个参数failure: function(err) {console.log(err);}
})

7.5.封装axios第三种方式

1.在request.js中对第二种封装方式进行优化产生第三种封装方式

/* 第三种封装axios方式 *//* 将发送请求看着是异步请求，封装到Promise中。
*/export function request(config) {/* 创建一个Promise对象，使用Promise对象提供的resolve函数处理网络请求成功返回的数据，reject函数处理网络请求失败返回的数据*/return new Promise((resolve, rejece) =>{// 1.创建axios实例const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})//2.发送网络请求instance(config).then(res => {resolve(res)}).catch(err => {rejece(err)})})
}

2.在main.js中调用第三种方式封装axios

/* ---------9.调用request.js文件中第三种方式封装axios--------- */import { request } from './network/request'request({// 1.传入config参数url: '/home/multidata'//2.当请求服务器成功调用Promise对象的then方法处理返回数据
}).then(res => {console.log(res);//2.当请求服务器失败调用Promise对象的catch方法处理返回数据
}).catch(err => {console.log(err);
})

7.6.封装axios终极方式

查看axios源代码会发现axios继承了AxiosInstance接口，而AxiosInstance返回的类型就是Promise
查看AxiosInstance源代码
查看AxiosInstance返回值类型就是Promise

通过上面查看axios的源代码找到了他的返回值类型就是一个Promise对象，那么我们对上面第三种封装axios进行优化，我们不在创建Promise对象直接使用axios本身返回的Promise对象。

1.在request.js中对axios的终极封装方式

/* 终极封装axios方式 */
/* 将发送请求看着是异步请求，封装到Promise中。但是我们不需要手动创建Promise对象，而是使用axios本身返回的Promise对象
*/export function request(config) {// 1.创建axios的实例const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})//2.发送网络请求,instance是axios的实例所以他的返回值类型是Promise类型return instance(config)
}

2.2.在main.js中调用终极方式封装axios

/* ---------10.调用request.js文件中终极方式封装axios--------- */import { request } from './network/request'request({// 1.传入config参数url: '/home/multidata'
}).then(res => {console.log(res);
}).catch(err => {console.log(err);
})

8.请求拦截器

axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。

8.1.请求拦截器基本使用

1.在request.js文件中创建请求拦截器

  /* -------------  3.axios的拦截器 ------------- *//* 3.1.请求拦截器- 表示在instance实例上使用interceptors(拦截器)使用request(请求)拦截，use代表使用- ctrl+点击use方法，查看use源代码可知他有两个函数式参数- onFulfilled：表示拦截请求成功的请求- onRejected：表示拦截请求失败的请求*/instance.interceptors.request.use(// 第一个参数config =>{console.log(config);},// 第二个参数err => {console.log(err);})//2.发送网络请求,instance是axios的实例所以他的返回值类型是Promise类型return instance(config)
}

2.在main.js中调用封装了拦截器的axios

/* ---------11.调用request.js文件中封装拦截器的axios--------- */import { request } from './network/request'request({// 1.传入config参数url: '/home/multidata'
}).then(res => {console.log(res);
}).catch(err => {console.log(err);
})

查看拦截器拦截效果
main.js文件中输出响应失败，是因为拦截器拦截请求后没有将请求转发到服务器上

8.2.请求拦截器转发请求

在请求拦截器中拦截了请求后，我们需要将请求继续转发出去，让请求访问服务器。这样请求才能成功，返回服务器数据。

1.在request.js文件中将config请求转发出去

在这里插入图片描述

2.查看请求拦截器，服务器返回成功。

在这里插入图片描述

8.2.请求拦截器作用

我们拦截请求后

可以在请求中添加一些配置内容。
在每次发送网络请求时，添加一个加载过程的图标。
某些网络请求需要携带特殊信息，比如登录token。当发现请求中没有token，可以拦截后跳转到让用户访问登录页面。

8.3.响应拦截器

响应拦截器和请求拦截器原理是一样的，他的use方法中也是传入两个函数式参数。

1.在request.js中请求拦截器下面创建响应拦截器

/* 3.2.响应拦截器- 表示在instance实例上使用interceptors(拦截器)使用response(请求)拦截，use代表使用- ctrl+点击use方法，查看use源代码可知他有两个函数式参数- onFulfilled：表示拦截请求成功服务器返回的数据- onRejected：表示拦截请求失败服务器返回的数据*/instance.interceptors.response.use(// 第一个参数res => {console.log(res);},// 第二个参数err => {console.log(err);})

2.查看响应服务器返回数据

8.4.请求和响应拦截处理逻辑交给调用组件

在request.js中封装好了请求和响应拦截器，但是拦截到内容后不能在request中处理，请求和响应如何处理须交给调用拦截器的组件去处理，所以我们将拦截到的请求和拦截响应都返回出去交给调用方处理。

请求拦截器返回拦截内容
响应拦截器返回拦截内容

9.axios完整代码总结

axios案例中使用的所有完整的代码，这里全部贴出。

request.js文件封装axios和拦截器
main.js中axios基本使用与调用request.js中封装的内容。

request.js文件完整代码

import axios from 'axios'/* 第一种封装axios方式 */
// export function request(config, success, failure) {
//   // 1.创建axios实例
//   const instance = axios.create({
//     baseURL: 'http://123.207.32.32:8000',
//     timeout: 5000
//   })// 2.发送真正的请求
/* - 创建axios实例后，在调用instance实例时需要传递三个参数，这三个参数就是创建request函数时定义的config, success, failure三个参数- config参数是第一个参数，这个参数是axios请求内容参数。- success参数是第二个参数，这个参数是一个回调函数，instance实例向服务器发送请求后，then接收服务器返回的数据需要交给调用instance实例的组件去处理，所以这里必须将将服务器返回数据抛出去，因此使用回调函数，then将接收到服务器返回的数据通过res参数传递给回调函数success，success函数中处理返回数据逻辑是由调用instance组件自己决定。这里只是将参数传入success函数，并且调用该函数。- failure参数是第三参数，这个参数也是一个回调函数，作用同success回调函数一样。区别是这个函数处理请求服务器返回的错误信息。
*/
//   instance(config)
//     // 当请求服务器成功返回数据自动调用then函数
//     .then(res => {
//       success(res);
//     })
//     // 当请求服务器失败返回数据自动调用catch函数
//     .catch(err => {
//       failure(err);
//     })
// }/* 第二种封装axios方式 */
/* 第一种方式定义request函数需要定义三个参数，我们可以优化下只定义一个config参数。在instance实例中通过config.baseConfig，config.success，config.failure替代第一种封装方式的config, success, failure三个参数*//* export function request(config) {// 1.创建axios实例const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})// 2.使用instance发送网络请求instance(config.baseConfig).then(res => {console.log('res===' + res);config.success(res);}).catch(err => {config.failure(err);})} *//* 第三种封装axios方式 *//* *//* - 将发送请求看着是异步请求，封装到Promise中。- 创建一个Promise对象，使用Promise对象提供的resolve函数处理网络请求成功返回的数据，reject函数处理网络请求失败返回的数据
*//* 
export function request(config) {return new Promise((resolve, rejece) =>{// 1.创建axios实例const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})//2.发送网络请求instance(config).then(res => {resolve(res)}).catch(err => {rejece(err)})})
}*//* 终极封装axios方式 */
/* 将发送请求看着是异步请求，封装到Promise中。但是我们不需要手动创建Promise对象，而是使用axios本身返回的Promise对象
*/
/* 
export function request(config) {// 1.创建axios的实例const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})//2.发送网络请求,instance是axios的实例所以他的返回值类型是Promise类型return instance(config)
}*//* 请求拦截器 */
/*根据拦截请求和返回状态分为四种连接方式- 请求成功拦截- 请求失败拦截- 返回成功拦截- 返回失败拦截
*/export function request(config) {// 1.创建axios的实例const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})/* -------------  3.axios的拦截器 ------------- *//* 3.1.请求拦截器- 表示在instance实例上使用interceptors(拦截器)使用request(请求)拦截，use代表使用- ctrl+点击use方法，查看use源代码可知他有两个函数式参数- onFulfilled：表示拦截请求成功的请求- onRejected：表示拦截请求失败的请求*/instance.interceptors.request.use(// 第一个参数config => {// console.log(config);//将请求返回，转发到服务器。return config;},// 第二个参数err => {console.log(err);return err;})/* 3.2.响应拦截器- 表示在instance实例上使用interceptors(拦截器)使用response(请求)拦截，use代表使用- ctrl+点击use方法，查看use源代码可知他有两个函数式参数- onFulfilled：表示拦截请求成功服务器返回的数据- onRejected：表示拦截请求失败服务器返回的数据*/instance.interceptors.response.use(// 第一个参数res => {// console.log(res);// 将拦截到的响应数据交给调用的组件处理return res.data;},// 第二个参数err => {console.log(err);return err;})//2.发送网络请求,instance是axios的实例所以他的返回值类型是Promise类型return instance(config)
}

main.js文件全部代码

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',render: h => h(App)
})//第一步导入axios模块
import axios from 'axios'// //第二步使用axios发送网络请求
// /* ---------1.axios基本使用--------- */
// axios({
//   // 请求服务器url地址
//   url: 'http://123.207.32.32:8000/home/multidata'
//   // then方法中处理请求服务器返回的数据
// }).then(res => {
//   console.log(res);
// })// /* ---------2.发送待参数的get请求--------- */
// axios({
//   url: 'http://123.207.32.32:8000/home/data',
//   // 专门针对get请求的参数拼接
//   params: {
//     type: 'pop',
//     page: 1
//   }
// }).then(res => {
//   console.log(res);
// })// /* ---------3.发送并发请求--------- */
// axios.all([
//   axios({
//     url: 'http://123.207.32.32:8000/home/multidata'
//   }),
//   axios({
//     url: 'http://123.207.32.32:8000/home/data',
//     params: {
//       type: 'sell',
//       page: 1
//     }
//   })
// ]).then(results => {
//   // 返回两个请求的结果
//   console.log(results);
//   // 获取第一个请求的返回结果
//   console.log(results[0]);
//   // 获取第二个请求的返回结果
//   console.log(results[1]);
// })// /* ---------4.发送并发请求使用spread获取每个请求的结果--------- */
// axios.all([
//   axios({
//     url: 'http://123.207.32.32:8000/home/multidata'
//   }),
//   axios({
//     url: 'http://123.207.32.32:8000/home/data',
//     params: {
//       type: 'sell',
//       page: 1
//     }
//   })
// ]).then(axios.spread((res1, res2) => {
//   console.log(res1);
//   console.log(res2);
// }))// /* ---------5.设置全局配置再发送网络请求--------- */// // axios全局配置
// axios.defaults.baseURL = 'http://123.207.32.32:8000'
// axios.defaults.timeout = 5000// // 设置了全局配置后，已配置的内容在发送网络请求时就不用在重复写
// axios.all([
//   axios({
//     url: '/home/multidata'
//   }),
//   axios({
//     url: '/home/data',
//     params: {
//       type: 'sell',
//       page: 5
//     }
//   })
// ]).then(axios.spread((res1, res2) => {
//   console.log(res1);
//   console.log(res2);
// }))// /* ---------6.创建axios实例--------- */// // 创建第一个axios实例对象 instance1
// const instance1 = axios.create({
//   // 配置instance1对象的全局配置
//   baseURL: 'http://123.207.32.32:8000',
//   timeout: 3000
// })// // 使用instance1对象发送网络请求
// instance1({
//   url: '/home/data',
//   params: {
//     type: 'pop',
//     page: 1
//   }
// }).then(res => {
//   console.log(res);
// })// // 创建第二个axios实例对象 instance2
// const instance2 = axios.create({
//   baseURL: 'https://httpbin.org/',//   timeoutL: 5000
// })// // 使用instance2对象发送网络请求
// instance2({
//   url: '/get'
// }).then(res => {
//   console.log(res);
// })/* ---------7.调用request.js文件中第一种方式封装axios--------- */
//import { request } from './network/request'/* request({// 1.传入config参数url: '/home/multidata'},// 2.传入success参数res => {// 处理请求服务成功返回的数据console.log(res);},// 3.传入failure参数err => {// 处理请求服务失败返回的数据console.log(err);}
) *//* ---------8.调用request.js文件中第二种方式封装axios--------- */
/* 
import { request } from './network/request'request({baseConfig: {url: '/home/multidata'},success: function(res) {console.log(res);},failure: function(err) {console.log(err);}
}) 
*//* ---------9.调用request.js文件中第三种方式封装axios--------- */
/* 
import { request } from './network/request'request({// 1.传入config参数url: '/home/multidata'
}).then(res => {console.log(res);
}).catch(err => {console.log(err);
})*//* ---------10.调用request.js文件中终极方式封装axios--------- */
/* 
import { request } from './network/request'request({// 1.传入config参数url: '/home/multidata'
}).then(res => {console.log(res);
}).catch(err => {console.log(err);
}) *//* ---------11.调用request.js文件中封装拦截器的axios--------- */import { request } from './network/request'request({// 1.传入config参数url: '/home/multidata'
}).then(res => {console.log(res);
}).catch(err => {console.log(err);
})