Vue--前端交互 axios
程序员文章站
2022-03-15 10:16:39
1. axios 的基本特性axios是基于Promise用于浏览器和node.js的HTTP客户端特征:支持浏览器和node.js支持 promise能拦截请求和响应自动转换JSON数据2. axios 的基本用法axios.get('/adata').then(ret=>{ console.log(ret.data) //data属性固定,用于获取后台响应数据 })3. axios的参数传递1.get通过restful传递参数也可以通...
1. axios 的基本特性
axios是基于Promise用于浏览器和node.js的HTTP客户端
特征:
- 支持浏览器和node.js
- 支持 promise
- 能拦截请求和响应
- 自动转换JSON数据
2. axios 的基本用法
axios.get('/adata').then(ret=>{
console.log(ret.data) //data属性固定,用于获取后台响应数据
})
3. axios的参数传递
1.get
通过
restful
传递参数
也可以通过params
选项传递参数
//restful
axios.get('http://localhost:3000/axios/123')
.then(function (ret) {
console.log(ret.data);
})
//params
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
})
.then(function (ret) {
console.log(ret.data);
})
2.delete
与get传参类似
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
})
.then(function (ret) {
console.log(ret.data);
})
3.post
通过选项传递参数(默认传递json格式的数据)
传字符串的格式需要 new URLSearchParams();
//json
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
})
.then(function (ret) {
console.log(ret.data);
})
//字符串
var params = new URLSearchParams();
params.append('uname', 'lisi');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params)
.then(function (ret) {
console.log(ret.data);
})
4.put
与post类似
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
})
.then(function (ret) {
console.log(ret.data);
})
3. axios响应结果及全局配置
1.响应结果主要属性
data
实际响应回来的数据headers
响应头status
响应状态码
2.Axios中全局配置
- 配置公共的基准URL axios.defaults.baseURL
- 配置超时时间 axios.defaults.timeout
- 配置公共的请求头 axios.defaults.headers.common[‘Authorization’]
//配置请求基准url
axios.defaults.baseURL = 'http://localhost:3000/';
axios.get('axios-json').then(function (ret) {
console.log(ret.data.uname);
})
4. axios 拦截器
1.请求拦截器
在请求发出之前设置一些信息
axios.interceptors.request.use(function (config) {
console.log(config.url);
config.headers.mytoken = 'nihao';
return config;
},
function (err) {
console.log(err);
})
2.响应拦截器
获取数据前对数据加工
axios.interceptors.response.use(function (res) {
// console.log(res);
var data = res.data
return data;
},
function (err) {
console.log(err);
})
axios.get('http://localhost:3000/adata').then(function (data) {
console.log(data)
})
async/await的基本用法(es7引入,方便异步操作)
async
关键字用在函数上(async函数的返回值是promise实例对象)await
关键字用于async函数中(await可以得到异步的结果)
async function queryData(id){
const ret = await axios.get('/data');
return ret;
}
queryData().then(ret=>{
console.log(ret)
})
本文地址:https://blog.csdn.net/dairen_j/article/details/110200761
下一篇: win10的hyper-v共享文件夹
推荐阅读
-
详解Vue前端对axios的封装和使用
-
ASP.NET使用AjaxPro实现前端跟后台交互详解
-
axios.defaults.withCredentials = true 前端跨域设置
-
前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
-
关于前端ajax请求的优雅方案(http客户端为axios)
-
Android的WebView与H5前端JS代码交互的实例代码
-
小范笔记:ASP.NET Core API 基础知识与Axios前端提交数据
-
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
-
vue---axios实现数据交互与跨域问题
-
初步认识Swiper_前端交互控制神器_滚动3D切换等特效简单制作