从零开始一个vue3前端项目day03-网络请求配置篇

发布时间 2023-09-01 18:18:00作者: 沁霓

  网络请求配置是项目中必不可少的部分,接下来就讲解一下项目中网络请求配置的常用步骤
1:选择网络请求库,一般vue采用axios,react采用umi框架的request,接下来就是在项目引入啦

$ npm install axios

2:一般在项目中我们都会对网络请求进行一个相应的封装,采用axios.create来创建实例,再对该实例添加拦截器来自定义封装

axios拦截器分为两种:

  请求拦截器-----添加请求配置,比如路径、响应超时、token等等
  响应拦截器-----添加网络请求响应,比如接口返回成功状态响应数据,报错响应错误信息等等

   创建实例:

  

  封装请求拦截---这里设置baseURL也是为了统一请求接口的前缀,然后代理到指定服务器,代理时候去掉即可

  

  

  最后,app use一下,windows.app.axios就是我们已经封装好的啦

  

3:封装axios之后,在实际项目中,接口一般采用在builder文件夹里面写一个api自动生成的方法(具体可以百度,这里就不详细介绍了,然后自己封装网络请求实现自动生成api的网络请求

  

   如图左边是封装的paAjax用来处理api自动生成网络请求统一化,右边是对paAjax进行一个封装以便我们获得响应式数据、以及loading状态等
  

  使用方法:

   const { data,run, loading } = usePdAjax(自动生成api的模块) eg: 模块名.count_post
   需要调用接口时候 run({}) run({path:{}}) data params同理