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) }