axios封装

已于 2023-04-14 00:23:55 修改
阅读量4.9k 收藏 31
点赞数 3
文章标签： vue.js 前端 javascript
于 2023-04-14 00:22:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43239880/article/details/130143352
版权

问题背景

在新项目开始时，axios的封装是必须的，这里就总结回顾一下axios都需要进行哪些封装把

基础配置(参考vue-element-admin，可直接使用)

1.请求自动携带token
2.统一处理错误情况
3.默认去除response的包装，只返回data。通过meta的responseAll配置为true获取所有的response

其中请求拦截器的逻辑为：如果用户登陆了有token，则在请求头上携带token
其中响应拦截器的逻辑为：
返回的code是否为200
    是：根据配置返回全部的res或者直接返回data
    否：message提示用户,抛出异常
           并且同时判断是否为token有问题的情况
                有问题：让用户确认是否退出
                    确认退出：调用vuex退出系统的方法并重新加载一下login页面

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000, // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 如果登录了，有token，则请求携带token
    // Do something before request is sent
    if (store.state.userInfo.token) {
      config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// respone拦截器
service.interceptors.response.use(
  // response => response,
  /**
   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
  response => {
    const res = response.data
    // 处理异常的情况
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000,
      })
      // 403:非法的token; 50012:其他客户端登录了;  401:Token 过期了;
      if (res.code === 403 || res.code === 50012 || res.code === 401) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject('error')
    } else {
      // 默认只返回data，不返回状态码和message
      // 通过 meta 中的 responseAll 配置来取决后台是否返回所有数据(包括状态码，message和data)
      const isbackAll = response.config.meta && response.config.meta.responseAll
      if(isbackAll){
        return res
      }else{
        return res.data
      }
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000,
    })
    return Promise.reject(error)
  }
)

export default service

如果不想配置过多的axios，那么上面的代码已经可以满足需求了。搭配使用方式为：
image.png

优化一：取消重复请求

参考地址：https://juejin.cn/post/6968630178163458084#heading-7
发生重复请求的场景一般有这两个(主要还是tab的切换会导致数据错乱)：

  • 对于列表数据，可能有tab状态栏的频繁切换查询，如果请求响应很慢，也会产生重复请求。当然现在很多列表都会做缓存，如Vue中用
  • 快速连续点击一个按钮，如果这个按钮未进行控制，就会发出重复请求，假设该请求是生成订单，那么就有产生两张订单了，这是件可怕的事情。当然一般前端会对这个按钮进行状态处理控制，后端也会有一些幂等控制处理策略啥的，这是个假设场景，但也可能会发生的场景。

实现思路：
我们大致整体思路就是收集正在请求中的接口，也就是接口状态还是pending状态的，让他们形成队列储存起来。如果相同接口再次被触发，则直接取消正在请求中的接口并从队列中删除，再重新发起请求并储存进队列中；如果接口返回结果，就从队列中删除，以此过程来操作。

效果：同时发送三个请求，出现这个canceled就是成功的把前两次请求给取消了

image.png

需要用到的几个函数

// axios.js
const pendingMap = new Map();

/**
 * 生成每个请求唯一的键
 * @param {*} config 
 * @returns string
 */
function getPendingKey(config) {
  let {url, method, params, data} = config;
  if(typeof data === 'string') data = JSON.parse(data); // response里面返回的config.data是个字符串对象
  return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&');
}

/**
 * 储存每个请求唯一值, 也就是cancel()方法, 用于取消请求
 * @param {*} config 
 */
function addPending(config) {
  const pendingKey = getPendingKey(config);
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (!pendingMap.has(pendingKey)) {
      pendingMap.set(pendingKey, cancel);
    }
  });
}
/**
 * 删除重复的请求
 * @param {*} config 
 */
function removePending(config) {
  const pendingKey = getPendingKey(config);
  if (pendingMap.has(pendingKey)) {
     const cancelToken = pendingMap.get(pendingKey);
     cancelToken(pendingKey);
     pendingMap.delete(pendingKey);
  }
}

axios简化版代码（方便看上面方法加入的位置）：

// axios.js
  const service = axios.create({
    baseURL: 'http://localhost:8888', // 设置统一的请求前缀
    timeout: 10000, // 设置统一的超时时长
  });

  service.interceptors.request.use(
    config => {
      // 删除重复的请求
      removePending(config);
      // 如果repeatRequest不配置，那么该请求则不能多次请求
      !config.repeatRequest && addPending(config)
      return config;
    }, 
    error => {
      return Promise.reject(error);
    }
  );

  service.interceptors.response.use(
    response => {
      // 删除重复的请求
      removePending(response.config);
      return response;
    },
    error => {
      // 删除重复的请求
      error.config && removePending(error.config);
      return Promise.reject(error);
    }
  );

加入到基础配置后的代码：

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000, // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    removePending(config)
    // 如果repeatRequest不配置，那么默认该请求就取消重复接口请求
    !config.repeatRequest && addPending(config)
    // 如果登录了，有token，则请求携带token
    // Do something before request is sent
    if (store.state.userInfo.token) {
      config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// respone拦截器
service.interceptors.response.use(
  // response => response,
  /**
   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
  response => {
    // 已完成请求的删除请求中数组
    removePending(response.config);

    const res = response.data
    // 处理异常的情况
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000,
      })
      // 403:非法的token; 50012:其他客户端登录了;  401:Token 过期了;
      if (res.code === 403 || res.code === 50012 || res.code === 401) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject('error')
    } else {
      // 默认只返回data，不返回状态码和message
      // 通过 meta 中的 responseAll 配置来取决后台是否返回所有数据(包括状态码，message和data)
      const isbackAll = response.config.meta && response.config.meta.responseAll
      if(isbackAll){
        return res
      }else{
        return res.data
      }
    }
  },
  error => {
    error.config && removePending(error.config)
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000,
    })
    return Promise.reject(error)
  }
)

// axios.js
const pendingMap = new Map();
/**
 * 生成每个请求唯一的键
 * @param {*} config 
 * @returns string
 */
function getPendingKey(config) {
  let {url, method, params, data} = config;
  if(typeof data === 'string') data = JSON.parse(data); // response里面返回的config.data是个字符串对象
  return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&');
}

/**
 * 储存每个请求唯一值, 也就是cancel()方法, 用于取消请求
 * @param {*} config 
 */
function addPending(config) {
  const pendingKey = getPendingKey(config);
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (!pendingMap.has(pendingKey)) {
      pendingMap.set(pendingKey, cancel);
    }
  });
}
/**
 * 删除重复的请求
 * @param {*} config 
 */
function removePending(config) {
  const pendingKey = getPendingKey(config);
  if (pendingMap.has(pendingKey)) {
     const cancelToken = pendingMap.get(pendingKey);
     cancelToken(pendingKey);
     pendingMap.delete(pendingKey);
  }
}

export default service

搭配使用api使用，比如某个请求是可以同时进行请求的：
image.png
提问：取消了接口的重复请求，还有必要做按钮的防抖节流嘛？
回：不一定，取消重复请求只是在前端过滤了这个请求，后端还是收到了2份请求的，如果是表单类的提交，那数据库还是会生成2条数据的

优化二：配置loading

参考：https://blog.csdn.net/weixin_43239880/article/details/121688263?spm=1001.2014.3001.5501
为什么需要在axios中配置loading？
原因：每次发请求都需要去配置一个值，然后请求开始将该值设为true，请求完毕设为false。感觉很麻烦
效果：发送请求时加入配置：可以让任意一个盒子loading

const res3 = await getListById({ loading: true, loadingDom: ".bg3" })

image.png
需要用到的函数

const LoadingInstance = {
  _target: null, // 保存Loading实例
  _count: 0, // 计算数量，保证一次只有一个loading
}
function openLoading(loadingDom) {
  LoadingInstance._target = Loading.service({
    lock: true,
    text: '数据正在加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(25, 32, 53, 1)',
    target: loadingDom || 'body',
  })
}
function closeLoading() {
  if (LoadingInstance._count > 0) LoadingInstance._count--
  if (LoadingInstance._count === 0) {
    LoadingInstance._target.close()
    LoadingInstance._target = null
  }
}

axios简化版代码（方便看上面方法加入的位置）：

// axios.js
  const service = axios.create({
    baseURL: 'http://localhost:8888', // 设置统一的请求前缀
    timeout: 10000, // 设置统一的超时时长
  });

  service.interceptors.request.use(
    config => {
       // 打开loading
    if (config.loading) {
      LoadingInstance._count++
      if(LoadingInstance._count === 1){
        openLoading(config.loadingDom)
      }
    }
      return config;
    }, 
    error => {
      return Promise.reject(error);
    }
  );

  service.interceptors.response.use(
    response => {
      // 关闭loading
    if (response.config.loading) {
      closeLoading()
    }
      return response;
    },
    error => {
      // 关闭loading
    if (error.config.loading) {
      closeLoading()
    }
      return Promise.reject(error);
    }
  );

加入到基础配置后的代码。这也是最终的完整代码：

import axios from 'axios'
import { Message, Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000, // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    removePending(config)
    // 如果repeatRequest不配置，那么默认该请求就取消重复接口请求
    !config.repeatRequest && addPending(config)
    // 打开loading
    if (config.loading) {
      LoadingInstance._count++
      if(LoadingInstance._count === 1){
        openLoading(config.loadingDom)
      }
    }
    // 如果登录了，有token，则请求携带token
    // Do something before request is sent
    if (store.state.userInfo.token) {
      config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// respone拦截器
service.interceptors.response.use(
  // response => response,
  /**
   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
  response => {
    // 已完成请求的删除请求中数组
    removePending(response.config)
    // 关闭loading
    if (response.config.loading) {
      closeLoading()
    }

    const res = response.data
    // 处理异常的情况
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000,
      })
      // 403:非法的token; 50012:其他客户端登录了;  401:Token 过期了;
      if (res.code === 403 || res.code === 50012 || res.code === 401) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject('error')
    } else {
      // 默认只返回data，不返回状态码和message
      // 通过 meta 中的 responseAll 配置来取决后台是否返回所有数据(包括状态码，message和data)
      const isbackAll = response.config.meta && response.config.meta.responseAll
      if (isbackAll) {
        return res
      } else {
        return res.data
      }
    }
  },
  error => {
    error.config && removePending(error.config)
    // 关闭loading
    if (error.config.loading) {
      closeLoading()
    }
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000,
    })
    return Promise.reject(error)
  }
)

// --------------------------------取消接口重复请求的函数-----------------------------------
// axios.js
const pendingMap = new Map()
/**
 * 生成每个请求唯一的键
 * @param {*} config
 * @returns string
 */
function getPendingKey(config) {
  let { url, method, params, data } = config
  if (typeof data === 'string') data = JSON.parse(data) // response里面返回的config.data是个字符串对象
  return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&')
}

/**
 * 储存每个请求唯一值, 也就是cancel()方法, 用于取消请求
 * @param {*} config
 */
function addPending(config) {
  const pendingKey = getPendingKey(config)
  config.cancelToken =
    config.cancelToken ||
    new axios.CancelToken(cancel => {
      if (!pendingMap.has(pendingKey)) {
        pendingMap.set(pendingKey, cancel)
      }
    })
}
/**
 * 删除重复的请求
 * @param {*} config
 */
function removePending(config) {
  const pendingKey = getPendingKey(config)
  if (pendingMap.has(pendingKey)) {
    const cancelToken = pendingMap.get(pendingKey)
    cancelToken(pendingKey)
    pendingMap.delete(pendingKey)
  }
}
// ----------------------------------loading的函数-------------------------------
const LoadingInstance = {
  _target: null, // 保存Loading实例
  _count: 0,
}
function openLoading(loadingDom) {
  LoadingInstance._target = Loading.service({
    lock: true,
    text: '数据正在加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(25, 32, 53, 1)',
    target: loadingDom || 'body',
  })
}
function closeLoading() {
  if (LoadingInstance._count > 0) LoadingInstance._count--
  if (LoadingInstance._count === 0) {
    LoadingInstance._target.close()
    LoadingInstance._target = null
  }
}

export default service

loading搭配api使用：
image.png
loading页面中使用：
image.png

优化三：用qs模块来序列化参数

我这边没有使用qs进行序列化。主要原因是因为现在前后端交互的数据格式主流就是json格式。只有图片上传接口会使用表单的方式进行提交。 如果是个别的post接口，后台要求你用表单提交，你可以进行交涉下。
前后端交互格式参考https://blog.csdn.net/qq_43654065/article/details/114642300

最终的完整代码

import axios from 'axios'
import { Message, Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000, // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    removePending(config)
    // 如果repeatRequest不配置，那么默认该请求就取消重复接口请求
    !config.repeatRequest && addPending(config)
    // 打开loading
    if (config.loading) {
      LoadingInstance._count++
      if(LoadingInstance._count === 1){
        openLoading(config.loadingDom)
      }
    }
    // 如果登录了，有token，则请求携带token
    // Do something before request is sent
    if (store.state.userInfo.token) {
      config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// respone拦截器
service.interceptors.response.use(
  // response => response,
  /**
   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
  response => {
    // 已完成请求的删除请求中数组
    removePending(response.config)
    // 关闭loading
    if (response.config.loading) {
      closeLoading()
    }

    const res = response.data
    // 处理异常的情况
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000,
      })
      // 403:非法的token; 50012:其他客户端登录了;  401:Token 过期了;
      if (res.code === 403 || res.code === 50012 || res.code === 401) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject('error')
    } else {
      // 默认只返回data，不返回状态码和message
      // 通过 meta 中的 responseAll 配置来取决后台是否返回所有数据(包括状态码，message和data)
      const isbackAll = response.config.meta && response.config.meta.responseAll
      if (isbackAll) {
        return res
      } else {
        return res.data
      }
    }
  },
  error => {
    error.config && removePending(error.config)
    // 关闭loading
    if (error.config.loading) {
      closeLoading()
    }
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000,
    })
    return Promise.reject(error)
  }
)

// --------------------------------取消接口重复请求的函数-----------------------------------
// axios.js
const pendingMap = new Map()
/**
 * 生成每个请求唯一的键
 * @param {*} config
 * @returns string
 */
function getPendingKey(config) {
  let { url, method, params, data } = config
  if (typeof data === 'string') data = JSON.parse(data) // response里面返回的config.data是个字符串对象
  return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&')
}

/**
 * 储存每个请求唯一值, 也就是cancel()方法, 用于取消请求
 * @param {*} config
 */
function addPending(config) {
  const pendingKey = getPendingKey(config)
  config.cancelToken =
    config.cancelToken ||
    new axios.CancelToken(cancel => {
      if (!pendingMap.has(pendingKey)) {
        pendingMap.set(pendingKey, cancel)
      }
    })
}
/**
 * 删除重复的请求
 * @param {*} config
 */
function removePending(config) {
  const pendingKey = getPendingKey(config)
  if (pendingMap.has(pendingKey)) {
    const cancelToken = pendingMap.get(pendingKey)
    cancelToken(pendingKey)
    pendingMap.delete(pendingKey)
  }
}
// ----------------------------------loading的函数-------------------------------
const LoadingInstance = {
  _target: null, // 保存Loading实例
  _count: 0,
}
function openLoading(loadingDom) {
  LoadingInstance._target = Loading.service({
    lock: true,
    text: '数据正在加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(25, 32, 53, 1)',
    target: loadingDom || 'body',
  })
}
function closeLoading() {
  if (LoadingInstance._count > 0) LoadingInstance._count--
  if (LoadingInstance._count === 0) {
    LoadingInstance._target.close()
    LoadingInstance._target = null
  }
}

export default service

总结

基础的axios即可满足大部分项目的需求，配置loading和取消重复请求就见仁见智了，可加可不加。

项目demo源码地址：https://github.com/rui-rui-an/packageAxios

吃炸鸡的前端
关注
  • 3
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios的ts二次封装+调用
02-02
对axios进行二次封装方便代码抽离，实例中包含代码封装，代码抽离，代码调用三个文件
axios 最详细封装
热门推荐
m0_58481462的博客
08-17 4万+
axios 最详细封装
简单封装axios
最新发布
吉屋安的博客
02-24 638
请求拦截器，用于在请求发送前进行处理，比如在请求头中添加 token ，在请求发送之前，如果有需要，可以在请求头中加入认证信息。创建一个名为 instance 的 Axios 实例，配置默认的请求地址和超时时间。封装 POST 请求方法，支持传入请求地址和数据。导出封装好的 GET、POST 和上传文件的方法。封装 GET 请求方法，支持传入请求地址和参数。响应拦截器，用于统一处理后端返回的错误信息。封装上传文件的方法，支持传入请求地址和文件。
axios 封装
12-11
Vue axios 二次封装 多种请求自适应 ** Fn: axios ** Intro: 公用封装的axios 已在main.js中进行 $axios代理 ** Intro: Store.state.permission.constUrl 为公用的接口前缀地址 ** Intro: url 方法接受参数 为定义的 接口地址后缀 ** Intro: data 方法接受参数 为定义的参数 ** Author: zyx ================= ** Fn: axiosImportFile ** Intro: 该方法用于导入excel文件 需改变content-type ** Author: zyx =================== * 专用于获取excel 流 * responseType: 'blob' * @param url * @returns {Promise}
Vue---axios封装
weixin_51103262的博客
11-01 98
vue—axios封装 封装 import axios from 'axios' axios.defaults.baseURL="http://127.0.0.1:8000/" axios.defaults.timeout = 1000000; axios.defaults.headers.post['Content-Type'] = 'application/json'; axios.defaults.headers.put['Content-Type'] = 'application/json';
axios 的封装
jia632133535的博客
01-03 807
// 封装请求 import axios from 'axios' import { ElMessage } from 'element-plus' // 请求 const http = axios.create({ baseURL: "https://www.liulongbin.top:8888/api/private/v1", timeout: 6000 }) // 请求拦截 http.interceptors.request.use(config => { //请求头.
Axios封装
weixin_57844432的博客
03-17 2257
axios 是一个轻量的 HTTP客户端基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求。
react + ts or vue + ts 通用axios封装的方法。
07-21
react + ts or vue + ts 通用axios封装的方法。 封装通用ts类型，封装通用requestMode.ts，统一存放api请求路径
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
axios 封装上传文件的请求方法
10-17
今天小编就为大家分享一篇axios 封装上传文件的请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
封装Axios
qinwei_123的博客
05-08 689
import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constructor(baseUrl = baseURL) { this.baseUrl = baseUrl this.queue = {} } getInsideConfig () { const...
搭建脚手架 配置反向代理 封装axios
Mr_Ch1023的博客
04-27 256
npm install -g @vue/cli // mac本前边还是一样，要加sudo ： sudo npm install -g @vue/cli vue create 项目名 defuault默认 Manually 自定义（vuex,sass,less,router…） Babel Router Vuex CSS Linter（用着不舒服，可选可不选） y history路由模式 n h...
封装axios
冠日的个人博客
07-02 293
使用promise 封装 ajax // axios.get().then() // hxios.get('url地址').then() let hxios = { get(url) { // 返回promise对象 return new Promise((resolve, reject) => { // ajax let xhr = new XMLHttpReques...
【转】Vue 2.0封装axios笔记
weixin_30433075的博客
07-04 390
前言 单页面应用大多采用前后端分离开发思路，我们知道，前端和后端交互有多中方式(服务器端渲染、Ajax、websocket等)，今天我们主要讲解Ajax部分。 最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的价值和其...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值