封装axios的接口请求数据方法

lib文件夹中http.js文件的内容

 

包含了数据请求,路由的拦截,同时向外界暴露的是一个方法,方法内有三个参数,分别为请求的方式,地址,数据

 1 import axios from 'axios';
 2 import qs from 'qs';
 3 
 4 const server=axios.create({
 5     timeout:5000,
 6     withCredentials:true
 7 })
 8 
 9 server.interceptors.request.use((config)=>{
10     if(config.method.toUpperCase()=="GET"){
11         config.params={...config.data}
12     }else if(config.method.toUpperCase()=="POST"){
13         config.headers["content-type"] = "appliaction/x-www-form-urlencoded";
14         config.data=qs.stringify(config.data);
15     }
16     vm.handlemount();
17     return config;
18 },(err)=>{
19     Promise.reject(err);
20 })
21 
22 
23 server.interceptors.response.use((res)=>{
24     if(res.statusText=="OK"){
25         vm.handleDestory();
26         return res.data
27     }
28 },(err)=>{
29     Promise.reject(err);
30 })
31 
32 
33 export default (method,url,data={})=>{
34     if(method.toUpperCase()=="GET"){
35         return server.get(url,{
36             params:data
37         })
38     }else if(method.toUpperCase()=="POST"){
39         return server.post(url,data);
40     }
41 }

数据请求

1 http("get", "/client/v1/goods/newactivityTemplate?aTId=130").then(data => {
2 
3     })    

上面方法可以进行封装

API文件中movie.js文件中的内容为

import http from "utils/http.js"


export const city_api = ()=>http("get","/api/cityList")

export const movie_coming_api = (cityId=10)=>http("get","/api/movieComingList",{cityId:cityId})

在请求接口数据的时候的代码为

import {city_api} from "api/movie"
 
async created() { if(!sessionStorage.getItem("comingList")){ let data = await movie_coming_api(this.cityId); this.comingList = data.data.comingList; sessionStorage.setItem("comingList",JSON.stringify(data.data.comingList)) } }, async handleGetCityAction({commit}){ let data = await city_api(); commit("handleGetCityMutation",data.data.cities) }

 

转载于:https://www.cnblogs.com/muzishijie/p/11348964.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值