【框架】axios封装（接口）【框架】axios封装（接口）

113 阅读 0 评论 75 点赞

我是靠谱客的博主谨慎煎蛋，这篇文章主要介绍【框架】axios封装（接口）【框架】axios封装（接口），现在分享给大家，希望可以做个参考。

【框架】axios封装（接口）

在这里插入图片描述

封装作用：接口的封装和实际项目开发流程和开发过程相关

1.统一请求方式，方便接口的取用和阅读
2.简化请求的代码量，减少重复代码冗余
3.接口代理
4.方便修改

开发流程(前端)

1.设计图和项目功能->2.后端写接口 ->3.提供前端接口 - ↓

->2.前端写页面->3.写功能->4.虚拟接口数据测试功能->5根据真实接口调整前端接口数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import axios from 'axios'
import store from '@/core/store'

let API = (options, filter) => {

    //返回数据处理
    function Response(res) {
        if (res.code === 0) {
            return Promise.resolve(filter ? filter(res.data) : res.data);
        }
        else {
            return Promise.reject(res);
        }
    }

    //请求拦截，返回虚拟数据
    if (options.vres) {
        return Response(options.vres)
    }

    //创建自定义请求实例
    const instance = axios.create();

    //请求拦截器
    instance.interceptors.request.use((config) => {
        Object.assign(config.headers, { Authorization: 'Bearer ' + store.state.user.token })
        config.baseURL = process.env.NODE_ENV === 'production' ? "/quiz" : "/"
      
        return config;
    });

    // 响应拦截器
    instance.interceptors.response.use((response) => {
        return Response(response.data)
    }, (error) => {
        return Promise.reject(error);
    });

    return instance(options);
}
export default API

封装结构

1.请求拦截
用于请求发送之前，处理请求的参数，多用于请求权限如token,cookie等的设置，请求地址的设置等
2.响应拦截
用于返回数据的处理
3.返回数据处理
原本返回数据处理理应放到第二项的【响应拦截】,但是实际开发中，前后端是并行开发，所以为了方便调试接口和功能，前端自行设置设置虚拟数据，但是响应拦截是接口实际请求后返回才触发，因此在使用虚拟数据的时候就失去了作用，因此单独封装，保证虚拟数据和真实数据有一样的处理流程

AXIOS中文官方文档：http://www.axios-js.com/zh-cn/docs/

接口列表示例

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import API from 'request'//引用封装的接口
export const  TextApi= ({name}) => {  //接口示例
  
  if(name==''){//验证，并返回提示的数据
  	return Promise.reject({message:'请填写名称'})
  }
  /*
  	这里可以在参数上传前进行处理或验证
  */
  return API.request({
      url: 'getcode',
      method: 'post',
      data:{name},
      vres:{//返回的虚拟数据
      	code:0,
        data:{a:1}
      }
  },data=>{//这里将接口获取的数据进行处理
  	return data.map(e=>{
      id:e.user_id,
      name:e.user_name
    })
  })
}

接口使用示例

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {TextApi} from '@/config/data.js'
export default {
	...
  methods:{
  	GetData(){
      let p = {name:123}
    	TextApi(p).then(data=>{
      	//使用返回的接口数据data
      }).catch(error=>{
      	//报错处理
        this.$Info.alert({icon:'error',message:error.message})
      })
    }
  }
}