Axios
文章平均质量分 66
从零开始,学会使用Axios,从此vue网络请求不再是问题……
CHH5431
公众号:xssy5431 小拾岁月
展开
-
模拟ajax请求数据并进行页面渲染
通过ajax请求数据后,进行页面渲染。注意:进行页面渲染的时候,只能用行间样式,要装饰页面。文件介绍1.goods.json,用于模拟后台接口数据[ { "price":"1000", "name":"小米手机", "imgUrl":"img/1.png" }, { "price":&a原创 2018-05-09 17:19:00 · 23831 阅读 · 10 评论 -
AJAX学习(1)---AJAX介绍与同步、异步
1、AJAX是什么?AJAX的全称:Asynchronus JavaScript and XML(异步的JavaScript 和XML),AJAX不是某种编程语言,而是一种无需重新加载整个页面的情况下能够更新部分网页的技术。传统的网页(不使用AJAX)想要更新内容或者提交一个表单,就要重新载入页面。使用了AJAX技术的网页,通过在后台跟服务器进行少量的数据交换,网页就可以实现异步局部更新。...原创 2019-09-17 21:45:04 · 325 阅读 · 0 评论 -
AJAX学习(2)---XML对象创建与 HTTP请求
一、XML对象创建1、XML对象创建方法var request = new XMLHttpRequest()2、兼容写法在需要使用IE浏览器低版本(IE5、IE6),使用我们需要做兼容处理。代码如下:var request;if(window.XMLHttpRequest){ request = new XMLHttpRequest()}else{ reques...原创 2019-09-17 22:29:55 · 290 阅读 · 0 评论 -
AJAX学习(3)---XMLHttpRequest发送请求与取得响应
一、XMLHttpRequest发送请求XMLHttpRequest发送请求方法open(method, url, async) send(string) 具体代码举例如下:// getrequest.open(get, 'get.php', true)request.send()// postrequest.open(post, 'add.php', true);re...原创 2019-09-17 22:56:09 · 505 阅读 · 0 评论 -
AJAX学习(4)---JSON与跨域处理
一、JSON1、JSON的基本概念JSON:JavaScript对象语法,是存储和交换文本信息的语法,类似XML。它采用键值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成。JSON是独立于语言的,不管是什么语言,都可以解析json,只需要按照json的规则即可。2、JSON与XML的对比json的长度和xml相比,比较短小。json读写的速度更快。json可以...原创 2019-09-18 21:25:06 · 301 阅读 · 0 评论 -
Axios学习(1)---介绍与使用
一、Axios介绍1、Axios是什么?Axios是一个基于promise的HTTP库,类似于jQuery的ajax,用于http请求。可以应用于浏览器端和node.js,既可以用于客户端,也可以用于node.js编写的服务端。2、Axios特性(1)支持Promise API(2)拦截请求与响应,比如:在请求前添加授权和响应前做一些事情。(3)转换请求数据和响应数据,比如...原创 2019-09-26 23:45:58 · 631 阅读 · 0 评论 -
Axios学习(2)---axios常用请求方法
一、axios常用的请求方法方法列举:get, post, put, patch, deleteget:一般用户获取数据post:一般用于表单提交与文件上传patch:更新数据(只将修改的数据推送到后端)put:更新数据(所有数据推送到服务端)delete:删除数据备注:post一般用于新建数据,put一般用于更新数据,patch一般用于数据量较大的时候的数据更新。二、get...原创 2019-09-28 13:42:09 · 1705 阅读 · 0 评论 -
Axios学习(3)---axios实例
一、axios实例的创建比如:后端接口地址有多个(www.test.com、www.example.com),并且超时时长不同(1000ms、2000ms),这个时候,我们可以创建实例。思路如下:创建多个实例,配置不同的超时时长,用不同的实例去请求不同的接口。使用axios.acreate来创建实例,配置相关信息,进行网络请求。代码如下:// 实例1let instance = axios...原创 2019-09-28 15:24:25 · 1135 阅读 · 0 评论 -
Axios学习(4)---axios拦截器、错误处理与取消请求
Axios学习(4)—axios拦截器、错误处理与取消请求一、拦截器什么拦截器?在请求前或响应被处理前拦截他们,分为两种:请求拦截器与响应拦截器拦截器的使用方法请求拦截器 // 请求拦截器 axios.interceptors.request.use(config => { // 在发送请求前做些什么 return confi...原创 2019-09-28 17:17:17 · 9362 阅读 · 0 评论 -
Axios学习(5)---axios请求的封装与使用
Axios学习(5)—axios请求的封装与使用思路分析axios 请求的封装,无非是为了方便代码管理,我们可以使用抽离拆分的思想,将不同功能模块的接口处理成不同的模块,然后封装一个方法,专门用于数据交互。第一步:新建 src/service/contactApi.js 文件const CONTACT_API = { // 获取联系人列表 getContactList:{...原创 2019-10-08 12:58:36 · 1091 阅读 · 2 评论