对axios进行二次封装

2023年10月15日 400次阅读 来源: Demo_Hu

第一步

在static/js/创建http.js文件

import axios from 'axios'
import qs from 'qs'

axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.withCredentials = true //请求携带cookie
axios.defaults.crossDomain = true //请求携带额外数据(不包含cookie)
axios.defaults.baseURL = api //请求的api

//http request 拦截器
axios.interceptors.request.use(
  config => {
    if (config.method === 'post' && config.url.indexOf('uploadApi') === -1) { //uploadApi是上传api,不对post做处理
      config.data = qs.stringify({
        ...config.data
      })
    } else if (config.method === 'get') {
      config.params = {
        ...config.params
      }
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
//http response 拦截器
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    return Promise.reject(error)
  }
)
/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params }).then(response => {
      if (response.data.success) {
        resolve(response.data.payload)
      } else {
        reject(response.data.error)
      }
    }).catch(err => {
      reject(err)
    })
  })
}
/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.get(apiUrl, data).then(response => {
      if (response.data.success) {
        resolve(response.data.payload)
      } else {
        reject(response.data.error)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

第二步

在main.js中引入

import axios from "axios"
import { post, get } from "../static/js/http"

Vue.prototype.$post = post
Vue.prototype.$get = get

第三步

在组件中使用

this.$post('接口地址', {
   //请求参数写在这里
}).then(res => {
   //请求成功处理
}).catch(err => {
  //请求失败处理
}

//其他请求方式同理.....
    原文作者：Demo_Hu
    原文地址: https://www.jianshu.com/p/f772c3a65965
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞