您现在的位置是:网站首页> 内容页

封装axios方法之一

  • 诚博国际官方网app
  • 2019-11-08
  • 307人已阅读
简介一、先来说说为什么要封装axios异步请求。我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue还是react。如何配置我这里就不说了。然后...然

一、先来说说为什么要封装axios异步请求。

我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue 还是react。

如何配置我这里就不说了。

然后...然后我们就会遇到一个打包上线的问题,上线时候我们必须把前缀拼接上,如果每个页面都保存一个路径变量会很麻烦,所以我们会封装axios来统一管理路径,这样可以使我们页面请求变得更加简洁。

代码如下

import axios from "axios"import qs from "qs"let http={ post:"" get:""}// http://60.10.00.005:8080//方法一 统一拦截const Website=""http.post= function (apidata){ let params = qs.stringify(data) return new Promise((resolvereject) => { axios.post(`${Website}`+apiparams).then((res) =>{ resolve(res) }) })}http.get= function (apidata){ let params = qs.stringify(data) return new Promise((resolvereject) => { axios.post(`${Website}`+apiparams).then((res) =>{ resolve(res) }) })}方法二单个请求定义// export function _login(data){// let params = qs.stringify(data)// return axios.post("/hrjc/mobile/login"params)// }export default http

个人偏爱方法一,因为方法一让我感觉代码会比较干净吧。方法二需要每个请求都写一次,显得代码太冗余了。

方法一用法如下

 

import http from "../server" http.post("/login"{"loginName": userName"password": password}) .then(function(response){} .catch(function(err){ console.log("失败"+err) })

方法二同理使用,就是提出去一部分,

个人知识积累

文章评论

Top