Vue.js(Axios)

embedded/2024/9/24 18:30:20/

Axios

  • 什么是:
    • Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
  • 何时:
    • 主要用于创建请求
    • 在浏览器中,创建xhr请求; 在node.js中,创建普通http请求
  • 为什么:
    • 浏览器中创建xhr请求: 4种方案:
      • (1)使用原生XHR对象——麻烦
      • (2)使用jQuery的封装函数——大材小用(jQuery中岂止ajax,还包含大量DOM/动画等操作,而Vue只使用ajax,别的都不用。)
      • (3)使用官方提供的VueResource插件——官方废弃
      • (4)使用第三方工具Axios——本身与Vue没任何关系
      • Vue.js生态系统(Ecosystem): Vue.js、Axios、Vue-Router、Vuex、MintUI、ElementUI、Weex…
  • 如何:
    • 1.在HTML页面中引入JS文件
      • <script src="js/axios.min.js"></script>
      • 在全局添加axios对象,包含发送http请求的api
    • 2.调用axios,发起异步请求
      • Get请求:
axios.get(“url”,{ params: {//get方式下, 随url发送的参数}
}).then(res=>{ … })
  • 服务端跨域CORS
    • 不能用res.send(...)
    • 只能
res.writeHeader(200,{"Access-Control-Allow-Origin":"*"
});
res.write(JSON.stringify(result));
res.end();
  • Post请求:
    • axios.post(“url”, “变量=值&变量=值&…”).then()
    • 坑!!!: get和post方法传参时,配置属性名不一样:
      • Get请求传参,用的是params: { } 对象
        Post请求传参,必须用字符串!
    • 解决:
      • 引入qs模块
      • <script src="js/qs.min.js"
    • 使用
      • axios.post(“url”, Qs.stringify({ 参数: 值, 参数: 值, ... })).then()
      • 结果:
        • stringify会将对象转化为queryString语法
    • 坑!!!:获得响应主体的数据: 数据不是直接返回,而是包裹在一个对象的data属性中返回。
      • 无论是get/post方式请求,获得的响应都是一个全新的对象。传统的响应数据,包含在该对象的res.data属性中
      • 所以,res.data,才能获得之前的响应结果

http://www.ppmy.cn/embedded/19247.html

相关文章

C++ Primer Plus

第一章 初始C #include <iostream> //#:预处理int main(void) //void:无参数 {using namespace std;int carrots; //定义声明语句:开辟内存空间&#xff0c; int:整型 cout << "how many corrots do you have?" << endl; //cout:输出流(out) end…

JPEG图像常用加密算法简介

JPEG图像加密算法 目前&#xff0c;JPEG图像加密算法可以分成异或加密、置乱加密和置乱与异或组合加密。下面对这三种加密方式进行阐述。 (1) 异或加密 文献[1]提出了一种基于异或加密的JPEG图像的RDH-EI方案。该算法通过对AC系数的ACA和图像的量化表进行流密码异或&#xf…

【MySQL]】数据库操作指南之数据库的基础操作

&#x1f331;博客主页&#xff1a;青竹雾色间 &#x1f331;系列专栏&#xff1a;MySQL探险日记 &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 ✨人生如寄&#xff0c;多忧何为 ✨ 文章目录 1. 创建数据库2.数据库的编码集与校验集2.1 编码集 (Character…

【项目实战】基于高并发服务器的搜索引擎

【项目实战】基于高并发服务器的搜索引擎 目录 【项目实战】基于高并发服务器的搜索引擎搜索引擎部分代码index.htmlindex.hpplog.hppparser.cc&#xff08;用于对网页的html文件切分且存储索引关系&#xff09;searcher.hpputil.hpphttp_server.cc&#xff08;用于启动服务器和…

对于IOC的注入两种方式(注解和XML)

xml进行注入 在Spring IoC 容器中基于xml完成对Bean的装配&#xff0c;创建测试类&#xff0c;获取ProductController的实例&#xff0c;调用其save()方法&#xff0c;在控制台上打印Product的信息 spring-config.xml <beans xmlns"http://www.springframework.org/sc…

Kotlin语法快速入门-函数(4)

Kotlin语法快速入门-函数&#xff08;4&#xff09; 文章目录 Kotlin语法快速入门-函数&#xff08;4&#xff09;四、函数1、函数定义2、infix关键字3、参数省略4、函数类型参数5、多参数--vararg 四、函数 1、函数定义 fun 函数名(参数: 类型) &#xff1a;返回值类型{//函…

Java-AQS的原理

文章目录 基本概述1. 设计思想2. 基本实现 一些关键词语以及常用术语&#xff0c;主要如下&#xff1a; 信号量(Semaphore): 是在多线程环境下使用的一种设施&#xff0c;是可以用来保证两个或多个关键代码段不被并发调用&#xff0c;也是作系统用来解决并发中的互斥和同步问题…

Android NDK开发 CMAKE 相关总结

预设变量含义介绍 工程结构组织&#xff1a; 代码目录 ├── CMakeLists.txt ├── a │ ├── CMakeLists.txt │ └── a.cpp └── b├── CMakeLists.txt├── b.cpp└── b.h路径相关&#xff1a; CMAKE_SOURCE_DIR&#xff1a;最顶层 CMakceLists.txt 所在…