VUE零基础入门axios的使用

目录
  • 一.axios是什么
  • 二.axios的特点
  • 三.axios怎么安装
  • 四.在VUE全局挂载
    • 导入
    • 挂载
    • 使用
  • 五.axios便捷方法
  • 六.axios基础方法
  • 七.axios执行结果
  • 八.config axios 配置
  • 九.restFul
  • 九.如何审查元素

一.axios是什么

axios是一款ajax请求工具,是一个用于发送ajax请求的HTTP库，本质上是对AJAX的封装。而且Axios支持 Promise操作， 让我们无需再使用传统callback方式来进行异步编程。(Promise 是JS中进行异步编程的一种解决方案。)

二.axios的特点

  • 前后端都可以使用
  • 不依赖dom
  • 拦截扩展强大
  • 可封装复用性强

三.axios怎么安装

win+R 找到cmd命令窗口 切换到项目目录(cd 项目目录)

输入npm i axios -S

然后运行项目

四.在VUE全局挂载

分为三步

在 main.js中

导入

import axios from 'axios';

挂载

Vue.prototype.$axios = axios;

使用

在App.vue中

this .$axios.xxx

举个栗子:

五.axios便捷方法

post(url , data , config)

get(url , config) get 传递参数给后端

?参数名=参数值&参数名2=参数值2?current=2

.delete(url,config) 删除

.put(url,data,config) 修改

六.axios基础方法

语法如下:

axios({

url,//请求的地址

methods//请求方法 get,post,put,delete

data,post请求的数据

params:get请求的数据

headers:请求头配置

})

七.axios执行结果

语法如下:

网络请求成功

.then(res=>{

res.data 请求返回的数据

}

请求失败

.catch(err=>{

err.response.data 返回失败数据

}

举个栗子:

this.$axios.get('/api/feed?current=' + this.current
						, {
								headers: {
									"Authorization": 'Bearer ' + localStorage.getItem('token')
								}
							},
					)
					.then(res => {
						console.log('成功', res.data);
						this.feedList = res.data.data;
						this.pagnation = res.data.pagnation;
					})
					.catch(err => {
						console.error(err);
						alert(err.response.data.msg)
					})

八.config axios 配置

给 headers: 请求头 添加token

headers: {
		  "Authorization": 'Bearer ' + localStorage.getItem('token')
		}

切记:'Bearer '要加空格

或者在main.js中直接配置

// 给每个请求都拦截下来 添加请求的token信息
axios.interceptors.request.use(function(config) {
	config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
	return config
})

九.restFul

可观看视频了解

1.接口设计风格

2.强调每个url地址都是一个资源

3.可以通过get,post,put,delete操作资源

4.get获取 post新增 put修改 delete删除

九.如何审查元素

在网络里

网络下面的载荷

网络下面的预览

应用中

到此这篇关于VUE零基础入门axios的使用的文章就介绍到这了,更多相关VUE axios内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue使用axios发送请求并实现简单封装的示例详解

    目录 一.安装axios 二.简单使用 1.配置 2.发送请求 三.封装使用 1.创建js封装类 2.配置 3.发送请求 一.安装axios npm install axios --save 二.简单使用 1.配置 main.js中加入如下内容 // 引入axios --------------------------------------------------- import axios from 'axios' Vue.prototype.$axios = axios Vue.proto

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • 详解Vue用axios发送post请求自动set cookie

    详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • VUE axios发送跨域请求需要注意的问题

    VUE axios发送跨域请求需要注意的问题

    在实际项目中前端使用到vue,后端使用php进行开发.前端使用axios请求请求 关于跨域 跨域的概念这些就不说了,百度一大堆相关的资料信息.我就只在这里记录下我在使用当中遇到的问题,以纪念在逝去的几个小时中资料查找的艰辛. 不多说,直接上代码~~~~ 同理,跨域的解决方案为cros.服务器 PHP端代码如下(laravel 中间件进行处理): public function handle($request, Closure $next) { if ($request->isMethod('OP

  • vue cli3 项目中如何使用axios发送post请求

    vue cli3 项目中如何使用axios发送post请求

    目录 使用axios发送post请求 首先需要安装对应的第三方包 发送post请求 发送get请求将index.js中再添加如下代码 vue使用axios的踩坑记录 axios跨域 解决方法 axios发起post请求后端无法接收数据 使用axios发送post请求 react  同样适用 首先需要安装对应的第三方包 cnpm  i  -S axios cnpm  i  -S lodash 然后在做下边的 在vue 项目中创建一个这样的文件目录 发送post请求 index.js中的文件内容是:

  • vue中axios处理http发送请求的示例（Post和get）

    vue中axios处理http发送请求的示例（Post和get）

    本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下: axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format   axios文档 在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍. 安装 使用node npm install axios 使用cdn <scrip

  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios

  • vue axios post发送复杂对象问题

    一.项目情形 现在vue项目中,一般使用axios发送请求去后台拉取数据. 在某些业务场景中,前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理.虽然axios可配置发送方式(post/get等),但如果不做其他配置,post的数据其实也是拼在请求地址后面,而这种传输方式会有很多问题:一是可能数据丢失,二是get传送的数据长度有limit,如果需要保存大段的中文,会报错:三是数据不直观,复杂对象的格式会出现问题. 二.解决方案 怎么实现使用post方法时,能实现formData方式提交

  • VUE零基础入门axios的使用

    VUE零基础入门axios的使用

    目录 一.axios是什么 二.axios的特点 三.axios怎么安装 四.在VUE全局挂载 导入 挂载 使用 五.axios便捷方法 六.axios基础方法 七.axios执行结果 八.config axios 配置 九.restFul 九.如何审查元素 一.axios是什么 axios是一款ajax请求工具,是一个用于发送ajax请求的HTTP库,本质上是对AJAX的封装.而且Axios支持 Promise操作, 让我们无需再使用传统callback方式来进行异步编程.(Promise 是

  • Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解

    目录 初识vue 模板语法 插值语法 指令语法 数据绑定 单向绑定 双向绑定 el和data的两种写法 el data Object.defineProperty方法 事件处理 事件修饰符 键盘事件 定义命名(不常用) 初识vue vue工作时,必须先创建Vue实例,且要传入一个配置对象 容器内的代码依然符合html规范,混入了一些特殊的Vue语法 <div id="root"> <h1>hello,{{name}}</h1> </div>

  • Bootstrap零基础入门教程(三)

    Bootstrap零基础入门教程(三)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.

  • Bootstrap零基础入门教程(二)

    Bootstrap零基础入门教程(二)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

  • C++中的STL中map用法详解(零基础入门)

    目录 一.什么是 map ? 二.map的定义 2.1 头文件 2.2 定义 2.3 方法 三.实例讲解 3.1 增加数据 3.2 删除数据 3.3 修改数据 3.4 查找数据 3.5 遍历元素 3.6 其它方法 四.总结 map 在编程中是经常使用的一个容器,本文来讲解一下 STL 中的 map,赶紧来看下吧! 一.什么是 map ? map 是具有唯一键值对的容器,通常使用红黑树实现. map 中的键值对是 key value 的形式,比如:每个身份证号对应一个人名(反过来不成立哦!),其中

  • Django零基础入门之调用漂亮的HTML前端页面

    Django零基础入门之调用漂亮的HTML前端页面

    引言:    Django如何调用HTML前端页面呢? Django怎样去调用漂亮的HTML前端页面呢? 就直接使用render方法即可! render方法是django封装好用来调用HTML前端模板的方法! 1.模板放在哪? 在主目录下创建一个templates目录用来存放所有的html的模板文件.(如果是使用pycharm创建django项目的话,默认就会自动创建这个目录哦!但是用命令创建django项目的话是没有此目录的!) templates目录里面再新建各个以app名字命名的目录来存放

  • Django零基础入门之路由path和re_path详解

    Django零基础入门之路由path和re_path详解

    目录 urls.py文件中的path和re_path 1.path的基本规则: 2.默认支持的转换器有: 3.re_path正则匹配: Django中实战使用path和re_path 1.urls.py文件: 2.views.py视图函数文件: 3.效果: 假设现在有个需求:   需要通过URL进行参数传递,我们该怎么做呢?     其中有个方法就是本文要讲的内容--path和进阶版的re_path. urls.py文件中的path和re_path 1.path的基本规则: path('test

  • Django零基础入门之模板变量详解

    Django零基础入门之模板变量详解

    引言: 我们在页面上会看到,谁登录的就会显示谁的信息,那么这个页面上的变量信息是怎样实现的呢? 这就是本文要讲述的内容--Django中的模板变量! 1.模板变量! 可以在前端页面中使用模板变量来取数据库中的数据,实现前端页面数据动态显示. (1)模板变量使用规则:(在HTML模板中使用!) 语法: {{ 变量名 }} 命名由字母和数字以及下划线组成,不能有空格和标点符号 可以使用字典.类对象.方法.函数.列表.字符串 不要和python或django关键字重名 注意: 如果data是一个字典,

  • Django零基础入门之自定义标签及模板中的使用

    Django零基础入门之自定义标签及模板中的使用

    目录 自定义标签: 第一部分 (1)视图函数编写: (2)编写模板文件: (3)自定义标签实现: (4)效果展示: 第二部分 (1)视图函数编写: (2)编写模板文件: (3)自定义标签实现: 第三部分 紧接上文--<Django零基础入门之自定义过滤器及模板中的使用>,本文来讲一讲自定义标签!!! 自定义标签: 源码学习: template.Library().simple_tags(): def simple_tag(self, func=None, takes_context=None,

  • Django零基础入门之自定义过滤器及模板中的使用

    Django零基础入门之自定义过滤器及模板中的使用

    目录 引言 自定义过滤器 (1)首先 (2)内置过滤器lower的使用: (3)自定义过滤器的使用: (4)模板中使用自定义过滤器: (5)效果展示: 引言 分析Django内置的模板过滤器: 通过分析可以将内置的过滤器理解为: 一个带有一个或两个参数的python函数: (输入的)变量的值[注意:不一定是字符串形式,在前面也讲过可以是哪些类型.] 参数的值--可以有一个初始值,或者完全没有参数.   自定义过滤器 新建一个名为ceshi的app以供本文学习使用: 自定义过滤器及标签所在的tem

随机推荐