fetch简介&语法

留心:像之前的XMLHttpRequest 但并不真的是,而是代替的

#概念:fetch是ecma组织基于promise开发http api ,用来代替xhr  
#语法:fetch函数类型,有两个实参,第一个实参是请求地址必须写,第二个是对象类型选写、里面的键是固定的、例如method字符串、headers对象类型(1请求头藏接口请求参数2请求头请求数据编码)、body键声明post请求参数(默认字符串类型数据按照get传参形式去写 参数名=值&.....&参数名=值

fetch(请求地址, {
   method: 'get/post',
   headers: {
       'token': '用户登录成功的身份标识',
       'content-type': 'application/x-www-form-urlencoded',
       ....
  },
   body: '参数名=值&.....&参数名=值'
   // ...
})

#get
fetch(请求地址).then(res => res.json()).then(res => console.log(res))
#post
   fetch(请求地址, {
  method: 'post',
       # 针对post请求传递字符串类型
       headers: {
           'Content-Type': 'application/x-www-form-urlencoded'
      },
  body: '参数名=值&.....&参数名=值'
       # post请求传递JSON数据类型
       headers: {
           'Content-Type': 'application/json',
      },
       body: JSON.stringify({
           参数名: '数据',
           参数名: '数据'
      })
  })
.then(res => res.json())
.then(res => console.log(res))

axios简介&语法

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

  • 语法

说明

#axios可以当方法使用、也可以当对象使用,还可以n种操作

#axios可以当方法使用:有一个实参对象类型必须,里面有固定的键 method字符串, headers对象类型, data也是根据请求方式确定类型, timeout请求超时等等

#留心:axios返回promise对象,直接通过.then获取接口数据,但是第一次then返回的HTTP相关信息、接口数据在data键中,因此需要写res.data才能获取接口数据。推荐优化.then(res => res.data).then(res=> res)

1 axios函数(较多

# 结构
axios({
url: '',
method: '',
headers: {},
data: 类型根据请求方式来定,   // post 如果gert就在url后面写?参数名=值 或者 用params对象类型

params: {参数名:值}

...
})

# get

axios({
方法1
url: '请求地址?参数名=值',
方法2
url: '请求地址',
params: {
    参数名:值,
}

method: 'get',
headers: {}
...
})

# post
axios({
url: '',
method: '',
headers: {},
data: 类型根据请求方式来定,
})

fetch,axios简介与语法的更多相关文章

  1. 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例

    目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...

  2. 前端进阶(2)使用fetch/axios时, 如何取消http请求

    前端进阶(2)使用fetch/axios时, 如何取消http请求 1. 需求 现在前端都是SPA,我们什么时候需要取消HTTP请求呢? 当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没 ...

  3. 一起学HTML基础-JavaScritp简介与语法

    简介: 1.什么是JavaScript? 它是个脚本语言,作用是使 HTML 页面具有更强的动态和交互性,它需要有宿主文件,它的宿主文件就是html文件.  JavaScript 是 Web 的编程语 ...

  4. JaveScript——简介、语法

    JS简介: 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司(已被Oracle ...

  5. JavaScript简介、语法

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  6. JavaScript基础(简介、语法)

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  7. 【3-28】javascript简介及语法

    一.简介 (一)定义:JavaScript是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,需有宿主文件:html文件. (二)作用:1.进行数据运算 2.对浏览器事件作出响 ...

  8. VUE系列三:实现跨域请求(fetch/axios/proxytable)

    1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...

  9. HTML-★★★★★JavaScritp简介与语法★★★★★

    简介: 1.什么是JavaScript? 它是个脚本语言,作用是使 HTML 页面具有更强的动态和交互性,它需要有宿主文件,它的宿主文件就是html文件.  JavaScript 是 Web 的编程语 ...

  10. 3.25课·········JavaScript简介与语法

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

随机推荐

  1. MySQL-多表查询的两种方法、Navicat、python操作MySQL

    1.多表查询的两种方法 1.连表操作: 1.1:inner join:内连接,将两张表共同的部分连接起来生成一张新表.拼接顺序是把后面的表拼在前面的表,如果颠倒位置结果不同. select * fro ...

  2. 数据库系列:MySQL慢查询分析和性能优化

    1 背景 我们的业务服务随着功能规模扩大,用户量扩增,流量的不断的增长,经常会遇到一个问题,就是数据存储服务响应变慢. 导致数据库服务变慢的诱因很多,而RD最重要的工作之一就是找到问题并解决问题. 下 ...

  3. SpringBoot 整合Seccurity、权限管理

    Spring Boot 整合Spring Seccurity 1.创建maven工程 <?xml version="1.0" encoding="UTF-8&quo ...

  4. C语言补漏--内存管理-完结

    1.内存分布 2.内存操作函数 数组清空 2. 内存拷贝函数 数组拷贝 3.内存对比 总结 堆区开辟 内存泄漏只申请不释放,导致内存空间持续增长,导致推出 内存污染向没有申请的内存空间写数据  向堆区 ...

  5. JZOJ 4299. 【NOIP2015模拟11.2晚】舳舻牌

    题目 思路 倒序 \(DP\) 设 \(f_{i,j}\) 表示 \(A\) 先手,当前 \(A\) 报出的值为 \(i\),\(B\) 报出的值为 \(j\),\(A\) 取诱惑值大于等于 \(i\ ...

  6. Android中drawable和mipmap到底有什么区别

    欢迎通过我的个人博客来查看此文章 老项目代码中发现有的图片放到了drawable中, 有的图片放到了mipmap中, 开发时秉承哪个目录下文件多放哪里的原则, 偶尔有疑惑搜一搜文章, 看到了结论也就这 ...

  7. JSP 与 Servlet 之间的联系,及其语法

    JSP 是什么 JSP 将 Java 代码和特定变动内容嵌入到静态的页面中,实现以静态页面为模板,动态生成其中的部分内容.JSP 文件在运行时会被其编译器转换成更原始的 Servlet 代码.JSP ...

  8. Dev Express 框架自定义登录添加短信验证功能

    需求:登录界面改成这样 记录一下过程,以便下次操作类似的步骤有遗忘,也与大伙儿分享下,如有不当之处请指出,感谢. 参考官网文档:https://docs.devexpress.com/eXpressA ...

  9. 05-python的输入与输出

    python输入(input)与输出(print) 一.输入(input) 在python3中,input会将接收到的用户输入自动存储为字符串类型 username = input('输入用户名:') ...

  10. Win10中找回曾复制过的东西

    按Win+V,如果弹出的"剪贴板历史"设置已经打开,那么就可以找回.建议大家打开这项设置以防万一.