vue中axios请求的封装的介绍（代码）

1、发送请求模块目录

2、/api/url中存放的是每个模块的URL

// 商品模块 product.js
const product = {
  sku: {
    list: &＃39;/product/product/speclist&＃39;,
    options: &＃39;/product/product/options&＃39;
  }
}
export default product

// 公用请求模块 common.js
const common = {
  region: {
    provinces: &＃39;/region/region/list&＃39;,
    cities: &＃39;/region/region/list&＃39;
  },
  upload: {
    image: &＃39;/product/product/upload&＃39;
  }
}
export default common

发送请求的时候只需要指定key（sku/list），如：this.$ajax(&＃39;sku/list&＃39;, param)；假定axios设置的baseURL是http://prod.storm.com/api/，那么最终的请求地址：http://prod.storm.com/api/pro...

3.requireURLs.js

使用webpack提供的require.context将src/api/url下后缀为js的所有文件引入，并整理出一个对象。

let urls = {}
const req = require.context(&＃39;./url&＃39;, false, /\.js$/)

const requireAll = requireCOntext=> requireContext.keys().map(i => {
  let url = requireContext(i)
  Object.assign(urls, url.default)
})
requireAll(req)
export default urls

整合common.js & product.js，最终得到的对象如下:

urls = {
  sku: {
    list: &＃39;/product/product/speclist&＃39;,
    options: &＃39;/product/product/options&＃39;
  },
  region: {
    provinces: &＃39;/region/region/list&＃39;,
    cities: &＃39;/region/region/list&＃39;
  },
  upload: {
    image: &＃39;/product/product/upload&＃39;
  }
}

4.ajax.js

import axios from &＃39;axios&＃39;
import qs from &＃39;qs&＃39;
import jsd from &＃39;js-file-download&＃39;
import store from &＃39;@/store&＃39;
import urlObj from &＃39;./requireURLs&＃39;
import { Message, MessageBox } from &＃39;element-ui&＃39;
import { getToken } from &＃39;@/utils/auth&＃39;

const service = axios.create({
  baseURL: `${process.env.BASE_API}/api/`, // 不同环境（dev/prod/test）使用不同的baseURL
  timeout: 5000
})
service.interceptors.request.use(
  cOnfig=> {
    // 上传文件时，config.data的数据类型是FormData，
    // qs.stringify(FormData)的结果是空字符串，导致报出上传文件为空的错误
    if (config.method === &＃39;post&＃39; && config.data.constructor !== FormData) {
      config.data = qs.stringify(config.data)
    }
    if (store.getters.token) {
      config.headers.common[&＃39;Auth-Token&＃39;] = getToken()
      // Auth-Token 登录过期后，重新登录不传token
      if (!config.headers.common[&＃39;Auth-Token&＃39;]) {
        delete config.headers.common[&＃39;Auth-Token&＃39;]
      }
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)
service.interceptors.response.use(
  respOnse=> {
    const res = response.data
    if (response.headers[&＃39;content-type&＃39;].indexOf(&＃39;application/vnd.ms-excel&＃39;) !== -1) {
      let fileName = response.headers[&＃39;content-disposition&＃39;].split(&＃39;=&＃39;)[1]
      jsd(res, fileName)
      return
    }
    if (res.code === 0) { // 和后台约定code:0代表请求成功
      return res
    } else {
      if (res.code === 18500) { // 和后台约定code:18500代表token未过期，但是被更新了
        handleLogin(&＃39;您已被登出，请重新登录&＃39;)
      } else if (res.code === 18501) { // 和后台约定code:18500代表token过期
        handleLogin(&＃39;登录已失效，请重新登录&＃39;)
      } else {
        // 统一处理接口的报错信息，如果需要具体到页面去处理，可以和后台另外约定一个code
        Message({
          message: res.msg,
          type: &＃39;error&＃39;,
          duration: 3 * 1000
        })
      }
      return Promise.reject(res)
    }
  },
  error => {
    console.log(&＃39;err &＃39; + error)
    let data = error.response.data
    Message({
      message: data.msg,
      type: &＃39;error&＃39;,
      duration: 3 * 1000
    })
    return Promise.reject(data)
  }
)

const handleLogin = title => {
  MessageBox.confirm(title, &＃39;提示&＃39;, {
    confirmButtonText: &＃39;重新登录&＃39;,
    showCancelButton: false,
    showClose: false,
    type: &＃39;warning&＃39;
  }).then(() => {
    store.dispatch(&＃39;FedLogout&＃39;).then(() => {
      location.reload()
    })
  })
}

const ajax = (path, data = {}, optiOns= {}) => {
  let url = path.indexOf(&＃39;http&＃39;) === -1 ? path.split(&＃39;/&＃39;).reduce((o, k) => {
    return o[k]
  }, urlObj) : path
  let method = options.method || &＃39;post&＃39;
  let params = { url, method }

  if (options.method === &＃39;get&＃39;) {
    Object.assign(params, { params: data }, options)
  } else {
    Object.assign(params, { data }, options)
  }
  return service(params)
}

export default ajax

5.在src/plugins中创建一个ajaxPlugin.js，并在src/main.js中引用

// ajaxPlugin.js
import ajax from &＃39;@/api/ajax&＃39;

let ajaxPlugin = {}

ajaxPlugin.install = Vue => {
  Vue.prototype.$ajax = ajax
}

export default ajaxPlugin

// main.js
import ajaxPlugin from &＃39;@/plugins/ajaxPlugin&＃39;

Vue.use(ajaxPlugin)

6.发送请求：

this.$ajax(&＃39;sku/list&＃39;).then(res => {})

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的Javascript视频教程栏目！

以上就是vue中axios请求的封装的介绍（代码）的详细内容，更多请关注 第一PHP社区 其它相关文章！