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

Posted 2022-07-11 muzishijie

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)