Axios怎么封装呢?

2020-11-29 127921阅读 3评论

大部分情况下都是以模块化开发的形式进行编码,产生了很多个js文件,如果我每个js文件了都需要用到axios请求数据,这样axios和我写的代码耦合度太高

假设如果某一天,我抛弃了axios,转用了request,那么就会出现一个非常严重的问题,我需要打开所有用到axios的js文件,进行修改其中的axios代码

如果有几十,上百个,我这不改的岂不是很费解?而且都是重复性高,没有任何价值的浪费时间,axios与项目的耦合度过高,我们要封装axios。

Axios怎么封装呢?  Axios Axios封装 第1张

安装axios

npm install axios --save

引入axios(二选一)

const axios = require("axios"); // commonjs
import axios from "axios"; // es6

封装axios完整代码request.js

// 引入axios
const axios = require("axios");

// 暴露request()方法
module.exports = {
  async request(data) {
    //创建axios实例
    const instance = axios.create()
    // 拦截器(处理axios返回的直接是请求数据,而不是要经过response.data获取数据)
    // 拦截器:当axios响应数据返回时,需要对数据进行加工的方法
    instance.interceptors.response.use(res => {
      return res.data
    })
    // 返回实例,返回的是一个promise
    return instance(data)
  }
}

在业务代码中使用封装后的axios

// 引入封装好的axios
const request = require("./request");

// 默认axios是get请求
const url = 'http://127.0.0.1:8080/user?username=admin&password=admin'
request(url).then(data=>{
    console.log(data) // 即可直接获取数据了
})

// get
const url = 'http://127.0.0.1:8080/user?username=admin&password=admin'
request({
        method: 'post',
        url: url,
        data:{
            username:'admin',
            password:'admin'
        }
    })
    .then(data=>{
        console.log(data) // 即可直接获取数据了
    })

// post
const url = 'http://127.0.0.1:8080/user'
request({
        method: 'post',
        url: url,
        data:{
            username:'admin',
            password:'admin'
        }
    })
    .then(data=>{
        console.log(data) // 即可直接获取数据了
    })

如果有哪一天我抛弃了aoxis转用request了,我就只需要修改request.js文件即可,就不用每个js文件都需要修改了。

文章版权声明:除非注明,否则均为小宜技术猫原创文章,转载或复制请以超链接形式并注明出处。

发表评论

表情:
评论列表 (有 3 条评论,127921人围观)
网友昵称:小西瓜
小西瓜V普通用户2021-08-04板凳 回复
5454848
网友昵称:Qing
QingV普通用户2020-12-21椅子 回复
我来看看看
网友昵称:小宜技术猫
小宜技术猫V博主2020-12-02沙发 回复
555555
取消
微信二维码
微信二维码
支付宝二维码