vue通用封装axios请求

网站精华

您当前的位置是：主页专栏

vue通用封装axios请求

【社区流浪汉】 2021-01-15 457次围观 7条评论

简介封装axios的请求，返回重新封装的数据格式,对错误的统一处理，以及在防止消频繁请求

import axios from 'axios' const CancelToken = axios.CancelToken class HttpRequest {  constructor () {    this.baseUrl = process.env.NODE_ENV === 'production' ? '线上地址' : '本地地址'    this.pending = {}  }  // 获取axios配置  getInsideConfig () {    const config = {      baseURL: this.baseUrl,      headers: {        'Content-Type': 'application/json;charset=utf-8'      },      responseType: 'json',      // 最多重发三次      retry: { retries: 3 },      timeout: 10000    }    return config  }  removePending (key, isRequest = false) {    if (this.pending[key] && isRequest) {      this.pending[key]('取消重复请求')    }    delete this.pending[key]  }  // 设定拦截器  interceptors (instance) {    // 请求拦截器    instance.interceptors.request.use((config) => {      // Do something before request is sent      let token = Cookie.get('token');      token = 'unkjnxr5slv7oks8ynor5sd8y1oc8bpv';      if (token) {        config.headers.Authorization = 'Bearer ' + token      }      let key = config.url + '&' + config.method      this.removePending(key, true)      config.cancelToken = new CancelToken((c) => {        this.pending[key] = c      })      return config    }, (err) => {      // errorHandle(err) 统一处理异常      // Do something with request error      return Promise.reject(err)    })     // 响应请求的拦截器    instance.interceptors.response.use((res) => {      // Any status code that lie within the range of 2xx cause this function to trigger      // Do something with response data      let key = res.config.url + '&' + res.config.method      this.removePending(key)      if (res.status === 200) {        return Promise.resolve(res.data)      } else {        return Promise.reject(res)      }    }, async (err) => {      // const result = await errorHandle(err)     // return result ? Promise.reject(result ) ? Promise.reject(err) // 统一处理异常      return Promise.reject(err)    })  }  // 创建实例  request (options) {    const instance = axios.create()    const newOptions = Object.assign(this.getInsideConfig(), options)    this.interceptors(instance)    return instance(newOptions)  }  get (url, config) {    const options = Object.assign({      method: 'get',      url: url    }, config)    return this.request(options)  }  post (url, data) {    return this.request({      method: 'post',      url: url,      data: data    })  }} export default new HttpRequest() 请求实例：import request from '~/axios'; const getCategories = () => {    return request.get('/url/list')}

转载：

喜欢 1

上一篇： axios请求缓存+防止重复提交

下一篇： Promise All 的批量请求的使用方式

相关文章

文章推荐

vue通用封装axios请求

淘宝 NPM 镜像站喊你切换新域名啦

git:如何管理本机的多个ssh密钥（多个远程仓库账号）

半导体短缺即将结束？分析师：如果没有 1 美元芯片会影响更多

群辉nas docker容器配置svn仓库，并实现外网访问

vue通用封装axios请求

淘宝 NPM 镜像站喊你切换新域名啦

git:如何管理本机的多个ssh密钥（多个远程仓库账号）

半导体短缺即将结束？分析师：如果没有 1 美元芯片会影响更多

群辉nas docker容器 配置svn仓库，并实现外网访问

群辉nas docker容器配置svn仓库，并实现外网访问