AI智能
改变未来

创新实训博客(44)——针对axios的封装的新的体验


前言

在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。

他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

原来前面讲过,封装好了一个request模块,但是其实封装的略显简陋,这里因为实际需要,又做了新的封装。

配置多域名请求不同URL

一般自己写项目时, 一个接口URL 就可以了。但在实际项目开发中,一个项目可能会请求不同的服务器的url。

这时,我们简单的配置下访问接口域名,然后不同域名的接口,直接换对象调用即可。

这样不管有多少个不同的接口,我们都可以很好的管理使用。

没有配置多url

是使用proxy来区别/api和/api/es的

[code]    proxy: {\'/api/es\': {target: \'http://39.105.44.114:48080/\',changeOrigin: true,secure: false},\'/api\': {target: \'http://127.0.0.1:8080/\',pathRewrite: {\'^/api/webhook\': \'/webhook\'},changeOrigin: true,secure: false}}

如果配置好了多url的话:

/api/es这个就可以简化成/es

然后使用路径重写,改成/api/es

这样就不会出现在request中,baseURL因为只有一个/api而导致重复的问题

效果

/es,代表着server1/api/es

/api,代表着server2/api

这样可以有效减少冲突

封装http.js

这个是学习了juejin上的一篇博客:

创建单独文件来封装axios,封装的同时,你需要和

后端

协商好一些约定

  • 请求头

    : 来实现一些具体的业务,必须携带一些参数才可以请求

    (例如:会员业务)
  • 状态码

    : 根据接口返回的不同

    status

    , 来执行不同的业务,这块需要和后端约定好。

  • 请求拦截器

    : 根据请求的请求头设定,来决定哪些请求可以访问。

  • 响应拦截器

    : 这块就是根据

    后端

    返回来的状态码判定执行不同业务

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 创新实训博客(44)——针对axios的封装的新的体验