VUE-----axios

目录

一.axios是什么

二.axios的特点

三.axios怎么安装

四. 在VUE全局挂载

   01  导入

 02  挂载

          03 使用

 五.axios便捷方法

六.axios基础方法

七.axios执行结果

 七.config axios 配置

八.restFul


一.axios是什么

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

   


二.axios的特点

  1. 前后端都可以使用
  2.  不依赖dom
  3.  拦截扩展强大
  4. 可封装复用性强

三.axios怎么安装

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

输入  npm i axios -S 

然后运行项目


 


四. 在VUE全局挂载

分为三步

在  main.js中

   01  导入

import axios from 'axios';

 02  挂载

Vue.prototype.$axios = axios;


03 使用

在App.vue中

this .$axios.xxx

 举个栗子:

 


 五.axios便捷方法

  1.  post(url , data , config)
  2.  get(url , config)    get 传递参数给后端                                                                                              ?参数名=参数值&参数名2=参数值2?current=2
  3.  .delete(url,config)   删除
  4.  .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删除 


九.如何审查元素

在网络里

 

网络下面的载荷

 

 网络下面的预览

 

应用中 

 

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值