• 学习axios必知必会(1)~axios基本介绍、axios配置、jsonserver接口模拟工具



    一、axios基本介绍

    1、axios(前端最流行的 ajax 请求库) 特点:

    基于 xhr + promise 的异步 ajax 请求库

    浏览器端/node 端都可以使用

    ③ 支持请求/响应拦截器

    ④ 支持请求取消

    ⑤ 请求/响应数据转换

    ⑥ 批量发送多个请求


    2、axios常用的语法:

    ★ axios(config): 通用/最本质的发任意类型请求的方法

    axios(url[, config]): 可以只指定 url 发 get 请求

    axios.request(config): 等同于 axios(config)

    ★ axios.create([config]): 创建一个新的 axios

    axios.defaults.xxx: 请求的默认全局配置

    axios.interceptors.request.use(): 添加请求拦截器

    axios.interceptors.response.use(): 添加响应拦截器



    二、axios的配置介绍(重点属性:url、baseURL、params、headers、 data、timeout、proxy)

    1、常用的默认配置的是:baseURL、method、timeout

    baseURL设置url的基本结构(请求根地址),域名和协议,再结合属性url某个请求路径,axios会自动将baseURL 和 url 进行拼接,从而得出正确的请求路径。

    method:请求方式 get/post

    timeout:延时时间(超过多少时间就取消请求)【单位是毫秒】


    2、介绍其他配置属性:

    params: 请求体/请求参数/查询的对象(当请求方式是get)

    ② transformRequest、transformResponse 对请求结果进行预处理、对响应结果进行预处理

    headers:请求头 (在身份验证时,可以在头信息加入一个标识)

    data:请求体(当请求方式是post), 数据形式有json对象和字符串形式

    responseType:响应的数据格式json/text/document/stream等

    ⑥ withCredentials:跨域亲戚是否携带cookies

    ⑦ auth:请求基础验证(验证用户名和密码)

    adapter自定义请求处理

    ⑨ xsrfCookieName和xsrfHeaderName 设置cookie的名字,设置头信息名字(安全设置,保证请求来自自己的客户端,避免跨站(域)攻击

    【标识保护作用---标识:返回请求的返回结果带有服务端的sessionID,保护:某些网站会通过超链接向在哪服务器发送请求,由于没有拿到服务器的sessionID,请求失败】

    ⑩ socketPath:设置socket文件位置,向docker的守护进行发送请求,与代理proxy有优先级关系,两者同时设定,优先选socket

    ⑪ httpAgent、httpsAgent 设置客户端信息

    proxy 代理:axios的代理是在服务端node.js 中【代理作用:抓取数据(爬虫),

    使用一个ip向某个目标服务器发送请求以抓取数据时,可能会被禁掉ip------解决:借助多个中间代理进行切换,发送请求从而获取到目标服务器的数据

    ⑬ cancelToken:取消请求



    三、json-server(接口模拟工具)

    1、josn-server:适合前端接口测试,为前端开发人员可以提供一个高仿真的RESTFul后台服务(数据原型),基于Rest API,运行在nodejs环境,用来模拟http协议的服务端.

    2、关于json-server更多细节可以参考github:https://github.com/typicode/json-server

    3、准备工作:使用前安装node.js 应用程序(安装node文章

    4、简单使用json-server:

    //(1)先进入某个文件夹项目下,编译器终端安装json-server依赖命令(-g 是全局安装):
    npm install -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)启动json-server服务(例如在浏览器访问:http://localhost:3000/posts/1)
    json-server --watch db.json
    

    5、json-server还提供了更多的路由:

    GET    /posts
    GET    /posts/1
    POST   /posts
    PUT    /posts/1
    PATCH  /posts/1
    DELETE /posts/1
    
  • 相关阅读:
    【黑金原创教程】【TimeQuest】【第六章】物理时钟与外部模型
    【黑金原创教程】【Modelsim】【第二章】Modelsim就是电视机
    【黑金原创教程】【Modelsim】【第一章】Modelsim仿真的扫盲文
    【黑金原创教程】黑金动力社区2013年原创教程连载计划公布
    【黑金原创教程】【TimeQuest】【第四章】内部延迟与其他
    【黑金原创教程】【TimeQuest】【第三章】TimeQuest 扫盲文
    【黑金原创教程】【TimeQuest】【第五章】网表质量与外部模型
    【黑金原创教程】【TimeQuest】【第二章】TimeQuest模型角色,网表概念,时序报告
    【黑金原创教程】【Modelsim】【第四章】激励文本就是仿真环境
    【黑金原创教程】【Modelsim】【第三章】理想就是美丽
  • 原文地址:https://www.cnblogs.com/shan333/p/15835918.html
Copyright © 2020-2023  润新知