首页 > 其他分享 >前端Axios-Day44

前端Axios-Day44

时间:2022-10-06 17:44:47浏览次数:75  
标签:axios http 请求 前端 Axios 3000 Day44 response localhost

JSON Server:模拟服务器环境插件

1.进行全局安装:npm i -g json-server

2.创建db.json文件并写入相关数据:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

3.运行http://localhost:3000/posts或者http://localhost:3000/comments或者http://localhost:3000/profile即可得到数据。

 

Axios:前端Ajax请求库,基于Promise的HTTP客户端。

GET、POST、PUT、DELETE请求:

axios({
            method:'请求类型',
            url:'请求地址',
            data:{value:"请求携带数据"},
        }).then(response=> {
            // Promise封装故配合then方法得到返回值(response/reject)
        })

axios封装的方法:

axios.request():axios请求的别名

 axios.request({
                method: 'GET',
                url: 'http://localhost:3000/comments',
            }).then(response => console.log(response))
        

axios.post:axios的post请求别名(url,参数)

axios.post('http://localhost:3000/comments', {
                "body": "some commentsss",
                "postId": 2
            }).then(response => console.log(response))
        

 

axios配置对象:config

① url:请求地址

② method:请求方式

③ baseUrl:请求基地址(相同部分)

④ transformRequest:对请求数据进行处理,处理后再发送至服务器。

⑤ transformResponse:对响应数据进行处理,处理后再传回客户端。

⑥ headers:对请求头信息进行配置。

⑦ params:对url进行设置动态参数。

⑧ responseType:表示服务器响应的数据类型。

 

 

标签:axios,http,请求,前端,Axios,3000,Day44,response,localhost
From: https://www.cnblogs.com/LWHCoding/p/16758083.html

相关文章

  • 前端程序员学习 Golang gin 框架实战笔记之二分析 context
    上一节:前端程序员学习Golanggin框架实战笔记之一开始玩gin之前讲到了如何使用gin,这一节我们来分析和调试一下它的代码。New()第一行的gin.New(),其实还有一种......
  • 聊聊前端面试中的js同步与异步问题
    前言我本来是打算写一篇co源码精读(为啥读co,因为它短),然鹅发现自己存在一系列基础问题没有搞透彻,打算写一个js基础系列文章,总结自己的理解(copy),希望与你在学习路上一同进......
  • 前端性能优化系列之 Service Workers 实战教程 All In One
    前端性能优化系列之ServiceWorkers实战教程AllInOneServiceWorkershttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_APIhttps://developer.mo......
  • 前端性能优化系列之 Web Workers 实战教程 All In One
    前端性能优化系列之WebWorkers实战教程AllInOneWebWorkershttps://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_APIhttps://developer.mozilla.org/e......
  • 前端-Ajax与网络
    Ajax/计算机网络相关什么是Ajax,Ajax都有哪些优点和缺点通过XmlHTTPRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这......
  • 前端三剑客快速入门(一)
    前言:前端三剑客即HTML、CSS、JavaScript。本文只对其进行简单介绍,达到简单WEB程序所需。若想要深入学习,可以查看W3C教程,其对三者进行了详细的介绍。HTML简介:HTML是一......
  • 常用的前端JavaScript方法封装
    [常用的前端JavaScript方法封装]1、输入一个值,返回其数据类型functiontype(para){returnObject.prototype.toString.call(para)}复制代码2、数组去重functio......
  • 前端HTML
    一、web前端标准1、HTML结构标准2、css样式标准3、js行为标准二、五大浏览器厂商1、ie浏览器2、谷歌浏览器3、火狐浏览器4、苹果浏览器5、欧朋浏览器其他浏览器......
  • 前端-ES6
    ES6let和const在ES6中通常用let和const来声明,let表示变量、const表示常量let和const都是块级作用域,不存在变量提升const声明的是一个只读常量,在声明时......
  • 前端常见报错
    Parsingerror:NoBabelconfigfiledetectedforxxx.EitherdisableconfigfilecheckingwithrequireConfigFile:false,orconfigureBabelsothatitcanfind......