Vue中使用aniox请求Ajax
程序员文章站
2022-07-02 23:18:44
Vue中使用aniox请求Ajaxaxios 是一个 封装好的 第三方ajax请求的库 特点：支持restfulapi 支持promise 解决回到地狱 支持ajax请求拦截get请求语法如下（不携带参数）axios.get('http://xxxx.xxx.com?a=10&b=20').then(res=>{ //成功回调}).catch(err=>{ // 失败回调})<......
Vue中使用aniox请求Ajax
axios 是一个 封装好的 第三方ajax请求的库
特点：支持restfulapi
支持promise 解决回到地狱
支持ajax请求拦截
get请求
语法如下（不携带参数）
axios.get('http://xxxx.xxx.com?a=10&b=20').then(res=>{
//成功回调
}).catch(err=>{
// 失败回调
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../vue.js"></script>
<script src="./axios.js"></script>
<style>
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
ul{
display: flex;
flex-wrap: wrap;
}
li{
width: 25%;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li
v-for="(film,index) in films"
:key="film.filmId"
>
<h3>{{film.name}}</h3>
<p>
导演：{{film.director}}
</p>
<img :src="film.poster" alt="">
</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
// 定义一个数据用来存储请求回来的数据
films: [],
},
created () {
this.axiosFilmData()
},
methods: {
axiosFilmData () {
axios.get('https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=9532407',{
headers:{
"X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"160256909153244709568514"}',
"X-Host": "mall.film-ticket.film.list"
}
}).then(res=>{
this.films = res.data.data.films
console.log(this.films);
})
}
}
})
</script>
</html> 携带参数
axios.get(url,{
params:{ // get请求需要携带的数据 在真实请求时，会自动 放到地址栏后面
a:10,
b:20
},
headers: { // 在请求头中 加上若干参数...
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./axios.js"></script>
<script src="../../vue.js"></script>
<style>
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
ul{
display: flex;
flex-wrap: wrap;
}
li{
width: 25%;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li
v-for="(film,index) in films"
:key="film.filmId"
>
<h3>{{film.name}}</h3>
<p>
导演：{{film.director}}
</p>
<img :src="film.poster" alt="">
</li>
</ul>
</div>
</body>
<script>
axios.defaults.baseURL = 'https://m.maizuo.com';
const vm = new Vue({
el: '#app',
data: {
films: [],
},
created () {
this.axiosFilmData()
},
methods: {
axiosFilmData () {
// 定义一个请求函数
axios.get('/gateway',{
headers: {
"X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"160256909153244709568514"}',
"X-Host": "mall.film-ticket.film.list"
},
params: {
cityId:440300,
pageNum:1,
pageSize:12,
type:1,
k:9532407
}
}).then(res=>{
// 将res中请求到的数据赋予到films中
if(res.data.status === 0){
this.films = res.data.data.films
}
})
}
}
})
</script>
</html>POST请求
axios.post('/user', { // 这个对象就是请求携带的数据 会自动挂载到请求体中
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
// 正确回调
console.log(response);
})
.catch(function (error) {
// 错误回调
console.log(error);
});综合请求
axios({
url:"xxx",
method:"xxx",
params:{},
data:{
},
headers:{
}
}).then(res=>{
// 成功时回调
}).catch(res=>{
// 失败时回调
})实例请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./axios.js"></script>
<script src="../../vue.js"></script>
<style>
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
ul{
display: flex;
flex-wrap: wrap;
}
li{
width: 25%;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li
v-for="(film,index) in films"
:key="film.filmId"
>
<h3>{{film.name}}</h3>
<p>
导演：{{film.director}}
</p>
<img :src="film.poster" alt="">
</li>
</ul>
</div>
</body>
<script>
// 定义一个实例用于请求
const request = axios.create({
baseURL: "https://m.maizuo.com",
timeout: 1000,
headers: {
"X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"160256909153244709568514"}',
"X-Host": "mall.film-ticket.film.list"
}
})
const vm = new Vue({
el: '#app',
data: {
films: []
},
created () {
this.axiosFilmData()
},
methods: {
axiosFilmData () {
request.get('/gateway',{
params: {
cityId:440300,
pageNum:1,
pageSize:12,
type:1,
k:9532407
}
}).then(res => {
if(res.data.status === 0){
this.films = res.data.data.films
}
console.log(this.films);
}).catch((err) => {
});
}
}
})
</script>
</html>配置默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';axios的拦截器
您可以在处理请求或响应之前拦截它们，或者捕获它们。
// 添加一个axios 请求的拦截
axios.interceptors.request.use(function (config) {
// 在发送之前可以在这里做某些事情
// 如果你不rerturn config 请求时发送不出去的
return config;
}, function (error) {
// 请求出错了 走这个拦截
return Promise.reject(error);
});
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
// http状态码 为2xx 会走这个响应成功的回调
return response;
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
}); 如果您以后需要删除拦截器，您可以这样做。
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);可以向axios的自定义实例添加拦截器。
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
本文地址：https://blog.csdn.net/T_ambition/article/details/109059342