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. exgcd & 线性同余方程

    前置芝士 裴蜀定理 同余的性质 exgcd exgcd即扩展欧几里得定理,常用来求解\(ax + by = gcd(a,b)\)的可行解问题 推导过程: 考虑我们有: ​ \(ax + by = gc ...

  2. 有效的字母异位词&两个数组的交集& 快乐数& 两数之和

    一.有效的字母异位词 242. 有效的字母异位词 1.方法概述 因为本题中字符串只包含小写字母,就可以定义一个数组来记录字符串中字符出现的次数.遍历第一个字符串,用charAt拿到对应的小写字母然后减 ...

  3. P17_总结

    能够知道如何创建小程序项目 微信开发者工具的使用.appID 的获取 能够清楚小程序项目的基本组成结构 app.js.app.json.app.wxss.pages 文件夹 能够知道小程序页面由几部分 ...

  4. Docker部署Nacos自动停止运行

    1.现象 使用docker部署的Nacos在运行一段时间后,就自动停止运行了. 查看docker运行容器,nacos停止了 2.解决 因为是学生购买的轻量级服务器,所以配置很低,出现这种问题我默认是内 ...

  5. 代码随想录算法训练营day17 | leetcode ● 110.平衡二叉树 ● 257. 二叉树的所有路径 ● 404.左叶子之和

    LeetCode 110.平衡二叉树 分析1.0 求左子树高度和右子树高度,若高度差>1,则返回false,所以我递归了两遍 class Solution { public boolean is ...

  6. PostgreSQL lag,lead获取记录前后的数据

    场景:获取当前行的下一行某一字段数据,获取当前行的上一行某一字段数据 1.测试数据: postgres=# select * from tb1; id | name ----+------ 1 | a ...

  7. 常用的"小脚本"-json数据处理

    小背景: 我们公司项目中的小脚本是一些工具类,比如常用的是MapUtil工具类的一些方法 写公司的MapUtil工具类的方法要注意,方法名的命名,因为方法名,在公司的项目的某个业务流程有对方法名的进行 ...

  8. SAP 文档必须包含正确的根元素

    --------------------------- LoadXML Malformed XML Error --------------------------- 文档必须包含正确的根元素. -- ...

  9. 时间戳转换为yyyy-MM-dd格式

    原文链接https://blog.csdn.net/hu104160112/article/details/111167033

  10. IT之软件公司组织架构

    总结一下软件企业的组织架构,软件公司大部分都很年轻,整个行业还在调整期,一般规模都在300人以内,现在国内大型的软件产品公司都不是靠软件起家的,国内软件三强:华为.中信.海尔都是从硬件甚至是家电做起的 ...