vue的axios请求封装

前言:    
                网上关于axios的请求封装超多,我就简单记录一下自己经常用到的axios

1.引入axios

        npm install axios

        在vue项目src目录里创建utils文件夹,用于存放工具函数js
        在utils里创建req.js文件并引入axios

        

        引入qs,用于参数序列化,处理发送请求的参数

        npm install qs

         req.js文件引入qs

        vue的axios请求封装_第1张图片

 2.进行封装axios

        对请求域名baseURL的处理 

        

       底部封装,对get,post,delete的封装
       暴露出get,post,delete

        vue的axios请求封装_第2张图片

         get封装

        vue的axios请求封装_第3张图片

         post封装

        vue的axios请求封装_第4张图片

        qs.stringify(params)是将对象序列化成url的形式,用&进行拼接

        delete封装

        vue的axios请求封装_第5张图片

         然后在项目src目录里创建api文件夹用于存放api

        vue的axios请求封装_第6张图片

         进行封装

        vue的axios请求封装_第7张图片

         在实际vue文件使用

         vue的axios请求封装_第8张图片

         在vue文件中引入自己需要的api

         vue的axios请求封装_第9张图片

         通过async await联合Promise使用

3.axios请求拦截器和响应拦截器

          请求拦截器是用于发请求的时候统一做一些事情: 比如携带请求头

vue的axios请求封装_第10张图片

         响应拦截器是用于响应后,统一做一些事情

         vue的axios请求封装_第11张图片

 

 就一个基础的axios封装完成!!!

你可能感兴趣的:(vue.js,前端,javascript)