Vue网络请求-Axios
一个基于promise的网络请求库,作用域node.js和浏览器中,是同一套代码可以运行在浏览器和node.js中。在服务器使用原生node.js的http模块,而在客户端(浏览器端)则使用 XMLHttpRequests。// axios.post('/mock/users.json', {id: 1, name: 'aaa'})// post请求。//添加一个默认的域名配置。//设置额外的请求
Vue网络请求-Axios
一个基于promise的网络请求库,作用域node.js和浏览器中,是同一套代码可以运行在浏览器和node.js中。在服务器使用原生node.js的http模块,而在客户端(浏览器端)则使用 XMLHttpRequests
-
特性
从浏览器创建XMLHttpRequests
从node.js创建http请求
支持Promise API
拦截请求和响应(类似于中间件)
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF [ 跨站请求攻击 ]
-
支持多种请求方式
axios(config)
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]]
axios.patch(url[, data[, config]])
尝试一下
发出一个简单的网络请求
./mock/users.json
[
{
"id": 1,
"name": "西瓜"
},
{
"id": 2,
"name": "草莓"
},
{
"id": 3,
"name": "猕猴桃"
}
]
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in users" :key="item.id">{{item.name}}</li>
</ul>
</div>
<!-- 引入配置文件,只是举例子简单用一下,在使用工程化后可以直接使用npm安装 -->
<script src="./js/axios.js"></script>
<script>
// console.log(axios); // 就是一个函数
const app = new Vue({
el:'#app',
data:{
users:[]
},
created(){
axios.get('./mock/users.json') //发出网络请求
.then(res=>this.users = res.data) //获取数据
}
})
</script>
</body>
</html>
效果
===
默认配置:
==》如果给sxios添加了默认哦欸之,则他在请求时回自动添加
- | - |
---|---|
请求地址 | url: ‘/user’ |
请求类型 | method: ‘get’ |
请根路径 | baseURL: ‘http://www.mt.com/api’ |
请求前的数据处理 | transformRequest:[function(data){}] |
请求后的数据处理 | transformResponse: [function(data){}] |
自定义的请求头 | headers:{‘x-Requested-With’:‘XMLHttpRequest’} |
URL查询对象 | params:{ id: 12 } |
查询对象序列化函数 | paramsSerializer: function(params){ } request body data: { key: ‘aa’} |
超时设置s | timeout: 1000 |
跨域是否带Token | withCredentials: false |
自定义请求处理 | adapter: function(resolve, reject, config){} |
身份验证信息 | auth: { uname: ‘’, pwd: ‘12’} |
响应的数据格式 | json / blob /document /arraybuffer / text / stream responseType: ‘json’ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in users" :key="item.id">{{item.name}}</li>
</ul>
</div>
<!-- 引入配置文件,只是举例子简单用一下,在使用工程化后可以直接使用npm安装 -->
<script src="./js/axios.js"></script>
<script>
// console.log(axios); // 就是一个函数
//添加一个默认的域名配置
axios.defaults.baseURL = 'http://127.0.0.1:5500/04_%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F_%E7%BD%91%E7%BB%9C_%E7%BB%84%E4%BB%B6';
//设置超时时长
axios.defaults.timeout = 10000
//设置额外的请求头信息
axios.defaults.headers.token = 'fewkfjeklfewjlfjl;fewjl;fejfejfew'
const app = new Vue({
el:'#app',
data:{
users:[]
},
created(){
axios.get('/mock/users.json') //发出网络请求
.then(res=>this.users = res.data) //获取数据
// axios.post('/mock/users.json', {id: 1, name: 'aaa'}) // post请求
}
})
</script>
</body>
</html>
-
拦截器
拦截器–》中间件 --》 切面编程
分 请求拦截器和响应拦截器
回调函数的参数config,就是当前请求的默认配置,一定要返回
请求拦截器
axios.interceptors.request.use(config => {
// 在请求拦截器中添加额外的请求头信息
config.timeoute = 20000
config.baseURL = url
config.headers.token = 'awekfwekfjlwfjewlfjew;lfl;fejfejlfejl'
return config
})
响应拦截器
axios.interceptors.response.use(res => {
if (res.status !== 200) {
return res.data
}
// alert('不好意思,数据没有得到')
// 因为响应的数据异常,我统一处理已经解决不太好,可以让用户自己来捕获异常,进行提示处理
return Promise.reject('nonono')
}, err => Promise.reject(err))
添加一个抛出异常的操作
更多推荐
所有评论(0)