fetch（js新增的用于請求的方法）
- 代碼段如下
<body>
<div id="app">
<ul>
<li v-for="(film,index) in films" :key="film.filmId">
<h5>
電影名：{{ film.name }}
</h5>
<p>
簡介：{{ film.synopsis }}
</p>
<p>
<img :src="film.poster" alt="">
</p>
<p>
類型：
{{ film.item.name }}
</p>
</li>
</ul>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
films:[]
},
created(){
//初始化完成時觸發(fā)
this.fetchFilms();
},
methods:{
fetchFilms(){ //請求數(shù)據(jù)
fetch('https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=5443328',{
headers:{
"X-Client-Info":'{"a":"3000","ch":"1002","v":"5.0.4","e":"1597720815568988677439489","bc":"110100"}',
"X-Host":"mall.film-ticket.film.list"
},
method:'GET'
}).then(res=>res.json()).then(res=>{
//res 才是請求的結果 格式化之后（什么格式取決于 第一個 then 返回的處理方法）
if(res.status === 0){
console.log(res);
this.films = res.data.films;
}
})
}
}
})
</script>
axios庫 （github搜索axios）
1.引入axios.js文件
axios get請求
(1).
axios.get('url?userName=xxx').then(res=>{}).catch(err=>)
- (2).
axios.get(url,{
params:{
userName:"xxx"
},
headers:{
}
}).then(res).catch()
- axios post請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (res) {
console.log(res);
})
.catch(function (error) {
console.log(error);
});
- axios 綜合請求寫法
axios({
method: 'post',
url: '/user/12345',
headers:{
},
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then().catch()
創(chuàng)建一個axios實例
- 可以對于所有的請求做一些初始化配置
- 配置是作用域所有的
- 使用實例來完成axios的請求
//創(chuàng)建一個 實例
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
axios攔截器
//攔截器
// 添加 請求 攔截器
axios.interceptors.request.use(function (config) {
// 可以在請求發(fā)送之前做一些事情 config 請求信息 config.headers
return config;
}, function (error) {
// 出錯了 走這里
return Promise.reject(error);
});
// 添加響應攔截
axios.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// 在響應數(shù)據(jù) 發(fā)送到 ajax之前，可以在這里攔截
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);
});
請求賣座網(wǎng)數(shù)據(jù)的案例(使用axios實例方法)
<body>
<div id="app">
<ul class="movies">
<li v-for="(film,index) in films" :key="film.filmId">
<h5>
電影名：{{ film.name }}
</h5>
<p>
<img :src="film.poster" alt="">
</p>
<p>
簡介：{{ film.synopsis }}
</p>
<p>
類型：
{{ film.category }}
</p>
</li>
</ul>
</div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/jquery.min.js"></script>
<script>
//創(chuàng)建一個axios實例
const require = axios.create({
baseURL:'https://m.maizuo.com',
timeout:5000,
headers:{
"X-Client-Info":'{"a":"3000","ch":"1002","v":"5.0.4","e":"1597720815568988677439489","bc":"110100"}',
"X-Host":"mall.film-ticket.film.list"
}
});
let vm = new Vue({
el:'#app',
data:{
films:[]
},
created(){
this.fetchFilms();
},
methods:{
fetchFilms(pageNum){
//這里可以直接使用創(chuàng)建好的實例來調(diào)用方法
//這里的地址url直接寫域名后面的path，因為域名在實例里面已經(jīng)配置過
require.get('/gateway',{
params:{
cityId:"110100",
pageNum:1,
pageSize:10,
type:1,
k:492559
}
}).then(res=>{
console.log(res);
if(res.data.status === 0){
this.films = res.data.data.films
}
})
}
}
})
</script>
