网络请求解析错误(网络请求代码)

Axios是什么？Axios是一个基于promise的HTTP库，可以在浏览器和node.js中使用我们知道，Promise是一个js异步的解决方案，它最大的特点就是可以通过进行链式调用。然后。
其实说白了，axios就是ajax的封装。axios有全部ajax，但ajax不一定有部分axios。综上所述，axios是ajax，ajax比axios更多。
为什么axios vue的作者尤雨溪推荐axios？符合前端分离的趋势。以及前端MVVM的波函数特性：在浏览器中发送XMLHttpRequests，在node.js中发送http请求，支持Promise API拦截请求并响应转换请求，响应数据取消请求。JSON数据客户端支持defense XSRF，支持多种请求模式：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]]) axios的基本使用比较简单，文档也非常多你应该先看看axios的官方文档：axios文档。
在html页面中直接使用：
基本都是用Html页面。下面这个案例中的get请求地址就是crmeb相关演示站的地址，可以用于测试采集！
要获得get请求，只需要在get请求的url中定义一个params:{}！发送一个post请求，类似于get请求，只是把方法改成post，定义一个data:{}。数据中的数据是服务器需要接收的字段数据！发送并发请求。如果需要等到多个接口的数据被同时请求后才能继续下面的开发逻辑，可以使用并发请求，axios并发请求，使用all方法。all方法的参数是一个数组，数组的每个值可以是一个请求。然后你可以在请求完成后直接合并两个请求的数据，返回的结果是一个数组！
如果希望自动扩展该数组，可以将axios.spread()方法传递给then()方法，如下所示：
但是在使用vue组件开发的时候，我们一般是通过npm安装，引入项目！
在组件开发中使用npm安装axios-save。一般在实际项目中，我们不会像上面那样直接使用axios来请求数据，而是将axios封装在一个单独的文件中。这样做的目的是将公共逻辑提取到一个配置文件中，并封装这些公共逻辑。甚至有一天，axios框架没有维护好，或者某个重大bug没有修复，我们也只能修改配置文件，达到全局修改的目的。如果把每个请求的逻辑都写进相应的组件，修改起来简直就是噩梦！
封装axios的请求文件request.js在项目的src目录中创建一个网络文件夹，然后在其中创建一个request.js文件。路径是src/network/request.js。
//src/network/request.js//引入axioimport axios from ‘ axios ‘//此处不使用默认导出，是为了以后的扩展，导出函数request (config)方便导出多个方法{//Create axios instance const instance=axios . Create({//此处定义每个请求的公共数据，如全局请求头、api根地址、过期时间等。//具体参数请参考axios官方文档base URL 3360 ‘ 3358demo26.crmeb.net/API’,超时3360 5000 })//interceptors . request . use(config={ console . log(config return config；}，err={ console . log(err)；}) //拦截响应instance . interceptors . response . Use(RES={ console . log(RES)returnres . data }，Err={console.log(err)}) //发送请求返回实例(config)使用我们封装的请求请求。通常，我们会将所有请求放在一个api.js文件中，并将每个请求封装为一个方法。例如，这里我将在request.js的同一个目录中创建一个api.js文件来封装我们所有的请求。
从’导入{请求}./API/request’//get分类导出常量gethome category=()={ return request({ URL 3360 ‘/category ‘ })}//Get横幅图导出常量gethome banner=()={ return request({ URL 3360 ‘/PC/Get _ banner ‘ })}然后引入相关接口方法将导出调用到组件中，比如：
从’导入{gethomebanner}./network/API’ gethomebanner()。然后(res={console.log (res)})上面是一个简单的包，里面有一个拦截请求和一个拦截响应，可能很多初学者理解起来有点困难。我在这里以个人观点来阐述，希望能给你一些启发！
什么是拦截器？充分发挥自己的阅读理解能力。拦截其实是我开始的路，我种下的这棵树。如果你想走这条路，留钱给它，拦截请求的意思就是，比如有些请求需要携带一些附加信息才能被访问。实际项目中最常见的信息就是需要登录才能访问的信息，所以在这里可以处理。也有拦截回应。比如你拿到数据后，可以先停下来处理。
Axios有一个全局拦截方法：axios.interceptors()必须在成功拦截后返回，否则无法请求数据，如下所示：
//拦截器。request . use(config={ console . log(config))如果需要携带一些额外的数据来获得请求；返回配置；}，err={ console . log(err)；})//拦截响应instance . interceptors . response . use(RES={ console . log(RES)returnres . data }，err={console.log (err)}) Axios还为我们提供了一些全局配置，如下：
axios . defaults . base URL=’ https://API . example . com ‘；axios . defaults . headers . common[‘ Authorization ‘]=AUTH _ TOKEN；axios . defaults . headers . post[‘ Content-Type ‘]=’ application/x-www-form-urlencoded ‘；当然，也可以在我们之前创建的axios实例中进行配置，让它只在某个实例上起作用！
然后看一下axios 3360的所有配置信息。
数据来自axios中文文档
{ //`url ‘是用于请求的服务器URL URL : ‘/用户’，//`方法’是创建请求时使用的方法method: ‘get ‘，//default //`baseURL ‘将自动加在`网址’前面，除非`网址’是一个绝对网址。//它可以通过设置一个` baseURL ‘便于为爱可信实例的方法传递相对基于URL的URL : ‘ https://某些域。com/API/’，//`transformRequest ‘允许在向服务器发送前，修改请求数据//只能用在放’,’后’和’补丁’这几个请求方法//后面数组中的函数必须返回一个字符串，或ArrayBuffer，或流转换请求：[函数(数据，头){ //对数据进行任意转换处理返回数据；}]，//`transformResponse ‘在传递给然后/接住前，允许修改响应数据transform response :[function(data){//对数据进行任意转换处理返回数据；}]，//`headers ‘头是即将被发送的自定义请求头头： { ‘ X-Requested-With ‘ : ‘ XMLHttpRequest ‘ }，//`params ‘是即将与请求一起发送的统一资源定位器参数//必须是一个无格式对象（普通物体)或URLSearchParams对象params: { ID: 12345 }，//`paramsSerializer ‘是一个负责`参数’序列化的函数//(例如https://www.npmjs.com/package/qs, http://API . jquery . com/jquery . param/)paramsserializer :函数(params){返回QS。stringify(params，{arrayFormat: ‘括号}) }，//`data ‘是作为请求主体被发送的数据//只适用于这些请求方法放’,’贴，和补丁’//在没有设置`转换请求’时，必须是以下类型之一：//- string，plain object，ArrayBuffer，ArrayBufferView，URLSearchParams //-浏览器专属：FormData，文件，Blob //-节点专属：流数据： {名字： ‘弗雷德’ }，//` 0超时’指定请求超时的毫秒数(0 表示无超时时间) //如果请求话费了超过`超时’的时间，请求将被中断超时： 1000，//`有凭据’表示跨域请求时是否需要使用凭证withCredentials: false，//default //`adapter适配器允许自定义处理请求，以使测试更轻松//返回一个承诺并应用一个有效的响应（查阅[响应文档](#response-api)).适配器：功能（配置){ /*.*/}，//`auth ‘表示应该使用超文本传送协议基础验证，并提供凭据//这将设置一个`授权’头，覆写掉现有的任意使用`标题’设置的自定义`授权’头auth : { username : ‘ Jane doe ‘，password: ‘s00pers3cret’ }，//`响应类型` 1表示服务器响应的数据类型，可以是arraybuffer ‘，’ blob ‘，’ document ‘，’ json ‘，’ text ‘，’ stream’ responseType: ‘json ‘，//default //`responseEncoding ‘表示用于解码响应的编码//Note:对于“流”的’响应类型’或客户端请求responseEncoding: ‘utf8 ‘，//default //`xsrfCookieName ‘忽略是用作跨站请求伪造令牌的值的甜饼干的名称xsrfCookieName: ‘XSRF-TOKEN ‘，//default //`xsrfHeaderName ‘是携带跨站请求伪造标记值xsrfheadername : ‘ X-XSRF-TOKEN ‘，//default//` onuploadpress ‘的超文本传送协议（Hyper Text Transport Protocol的缩写）头的名称允许为上传处理进度事件onuploadprogress :函数(进度事件){//对本机进度事件执行任何操作}，//` ondownloadpress ‘允许为下载处理进度事件onDownloadProgress:函数(进度事件){ //对原生进度事件的处理}，//`maxContentLength ‘定义允许的响应内容的最大尺寸maxContentLength: 2000，//`validateStatus ‘定义对于给定的超文本传送协议响应状态码是分解或拒绝承诺。
如果`有效状态’返回`真的` (或者设置为`空’或`未定义`),承诺将被解决；否则，承诺将被拒绝有效状态3360函数(状态){返回状态=200状态300；//default }，//`maxRedirects `上定义在节点。射流研究…中跟随的最大重定向数目//如果设置为0,将不会跟随任何重定向maxRedirects: 5，//default //`socketPath ‘定义要在节点. js中使用的一种多用户的计算机操作系统套接字。//例如/var/run/docker.sock ‘向码头工人守护程序发送请求。//只能指定”套接字路径”或代理服务器.//如果两者都指定了，则使用套接字路径.socketPath: null，//default //`httpAgent ‘和` https代理’分别在节点。射流研究…中用于定义在执行超文本传送协议(超文本传输协议的缩写)和安全超文本传输协议时使用的自定义代理。允许像这样配置选项：//`保持活动状态’默认没有启用httpAgent:新http .代理({ keepAlive: true })，httpsAgent:新https .代理({ keepAlive: true })，//’代理’定义代理服务器的主机名称和端口//`auth ‘表示超文本传送协议基础验证应当用于连接代理，并提供凭据//这将会设置一个`代理授权’头，覆写掉已有的通过使用`标题’设置的自定义`代理授权’头proxy: { host: ‘127.0.0.1 ‘，port: 9000，auth : { username : ‘ Mikey Mike ‘，password: ‘rapunz3l’ } }，//’ cancel token ‘指定用于取消请求的取消令牌//(查看后面的取消这节了解更多)取消令牌：新取消令牌(函数(取消){ })}