vue中对axios进行基础封装

先给出目录结构

在对axios进行封装前，引入了qs包对data进行处理，因为axios默认post请求时content-type为application/json，而后台需要接收的数据格式为application/x-www-form-urlencoded，这个具体是否修改看你们后台接收数据的方式。
在http.js文件中代码如下

import axios from 'axios'
// qs 是对 post 请求 data 进行处理，不然后台接收不了数据
// 因为axios post请求默认Content-type是 application/json
import qs from 'qs'
axios.defaults.timeout = 5000 // 5s没响应则认为该请求失败
axios.defaults.baseURL = '后台给出的baseURL'
axios.defaults.withCredentials = true	// 跨域时如果要带上cookie话则需要设置withCrendentials

// http request 拦截器 所有请求发出前都需要执行以下代码
axios.interceptors.request.use(
  request => {
    request.data = qs.stringify(request.data) //这里就用qs对data就行处理
    request.headers = {
      'Content-Type': 'application/x-www-form-urlencoded' //设置header覆盖content-type
    }
    return request
  },
  error => {
    return Promise.reject(error)
  }
)

/**
 *  封装get方法 跟 post 方法
 *  @param url
 *  @param params
 *  @returns {Promise}
 */
 
// 这种写法是导出后可以通过在main.js中使用Vue.use(http) 挂载到vue实例上
export default {
  install: (Vue) => {
    Vue.prototype.$get = (url, params = {}) => {
      return new Promise((resolve, reject) => {
        axios.get(url, {params})
          .then(response => resolve(response.data))
          .catch(error => reject(error))
      })
    }
    Vue.prototype.$post = (url, params = {}) => {
      return new Promise((resolve, reject) => {
        axios.post(url, params)
          .then(response => resolve(response.data))
          .catch(error => reject(error))
      })
    }
  }
}

在main.js文件下：

import Http from './utils/http'
Vue.use(Http)

那么在整个项目的任何地方都可以使用this.$get / this.$post 发请求了！

vue中对axios进行基础封装

猜你喜欢