封装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

封装axios的接口请求数据方法相关推荐

axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
axios delete有请求体吗_封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
axios取消接口请求
自己碰到的问题,扒了很多文档才理清楚,当做是笔记记下来说到取消接口请求,可能没碰到这样的坑冷不丁还有点懵,为什么会有取消请求这回事,既然决定要请求这个接口了又要取消它,岂不是有点画蛇添足的操作? 1 ...
封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
springboot + vue 后台token生成拦截器 redis实现前台封装axios xueX 接口实现
后台后台程序图片新建token的基础类 public class Constants {public final static String TOKEN = "token";} ...
Axios 如何缓存请求数据？
大家好,我是若川.欢迎加我微信 ruochuan12,长期交流学习.今天推荐这篇Axios缓存请求数据的文章,相信是常见的业务场景,感兴趣的读者可以看看 umi-request,支持缓存功能.另外我之 ...
Angular中使用axios实现get请求数据
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
jeesite如何已生成数据的数据源_如何在postman中自动生成接口请求数据，这个功能你需要知道，可结合浏览器和两大抓包工具使用...
在做接口调试或测试时,请求中的每个参数都要按照接口文档填写到postman的对应位置中,很是麻烦.那是否有这样一个功能?可以帮我们自动生成接口数据,无需修改,直接发送请求就可以呢. 这里面我们需要借助 ...

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

封装axios的接口请求数据方法相关推荐

最新文章

热门文章