在vue项目中的axios使用配置记录

Magicer 发布于2019-08-22 15:02 / 1003人阅读

摘要：默认项目中已经安装，基于开发，主要记录配置的相关。响应时间配置配置请求头静态资源配置接口地址传参序列化添加请求拦截器数据加载中，请稍后请求错误返回状态判断添加响应拦截器请求失败，请稍后再试发送请求配置组件内部的调用

默认vue项目中已经安装axios，基于element-ui开发，主要记录配置的相关。

axiosConfig.js

import Vue from "vue"
import axios from "axios"
import qs from "qs"
import { Message, Loading } from "element-ui"
// 响应时间
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"
// 静态资源
Vue.prototype.$static = ""

// 配置接口地址
axios.defaults.baseURL = ""
var loadingInstance
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(
  config => {
    loadingInstance = Loading.service({
      lock: true,
      text: "数据加载中，请稍后...",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    })
    if (config.method === "post") {
      config.data = qs.stringify(config.data)
    }
    return config
  },
  err => {
    loadingInstance.close()
    Message.error("请求错误")
    return Promise.reject(err)
  }
)
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
  res => {
    if (res.data.code === 200) {
      loadingInstance.close()
      return res
    } else {
      loadingInstance.close()
      Message.error(res.data.msg)
    }
  },
  err => {
    loadingInstance.close()
    Message.error("请求失败，请稍后再试")
    return Promise.reject(err)
  }
)
// 发送请求
export function fetchPost (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then(
        res => {
          resolve(res.data)
        },
        err => {
          reject(err.data)
        }
      )
      .catch(err => {
        reject(err.data)
      })
  })
}
export function fetchGet (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

main.js 配置

import { fetchGet, fetchPost} from "./api/axiosConfig"
Vue.prototype.$get = fetchGet
Vue.prototype.$post = fetchPost

组件内部的调用

getData () {
  let params = {
    userId: this.userId
  }
  this.$get("/xxx", params).then(res => {
    this.listsData = res.data
  }).catch(() => {
  })
}

云服务器私有云 webrtc项目中的stl库在哪里云服务器搭建vue项目域名中的记录值腾讯云服务器部署vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93114.html

Vue入坑笔记

摘要：近段时间常使用开发，写点记录，避免时间久之忘了。安装教程查看是否已安装，在中输入若已安装则输出版本号。继承报错可能是文件路径问题。当和继承的不同时在文件夹内外的话，会出现该错误。近段时间常使用vue-cli开发，写点记录，避免时间久之忘了。环境 1. nodejs　　vue-cli开发基于nodejs环境，确保开发的环境中已安装了nodejs。　　安装教程 https://www....

superw 2019-08-26 12:16 评论0 收藏0
node-vue前后端分离记录

摘要：用于列表渲染，可以循环遍历数组和对象注意目前指的是的迭代事件绑定，简写相当于与相比，避免了闪现的问题。 node vue项目开发看了近一周的vue开发，有诸多感触，我之前接触过react、angular所以特别想学学久仰大名的vue。学习半天以后发现，接触到的东西多了，学习起来就是容易很多，vue的指令我能个联想到angular的指令，vue组件化设计类似于react的组件化设计，包...

lowett 2019-08-22 13:41 评论0 收藏0
vue+node+mysql搭建个人博客（一）

摘要：其中用来完成请求，将添加的原型上后就不需要再在每个需要使用它的页面引入了每个页面都相当于一个组件，文件以结尾，第一次启动成功时看到的页面就是组件，路径。学习笔记...在线地址：cl8023.com github 数据库已改为mongodb 快速搭建 node 后端服务Github-quick-node-server 准备工作安装node，这是必须的新版node自带npm...

peixn 2019-08-21 17:48 评论0 收藏0
基于vue项目的知识总结

摘要：前言用有一段时间了，从用搭建项目一步步配置，到之后的研究动效这些，一直想写些东西记录一下做个总结，刚好趁着有空就整理一下。结语有新的知识点会更新到知识体系中，总结和心得体会会单独写文章详述，努力填坑前言用vue有一段时间了，从用vue-cli搭建项目、一步步配置axios、vuex、vue-router，到之后的研究canvas、动效这些，一直想写些东西记录一下、做个总结，刚好趁着...

tianlai 2019-08-29 14:07 评论0 收藏0
vue 项目总结一文件夹结构配置

摘要：文件夹结构文件夹里的文件夹设置是灵活的，可以根据自己的习惯进行，不必雷同。对文件夹配置的总结先到此为止，下一篇文章会是对文件夹里具体文件的配置和例子总结，有需要的可以去看看。之前一段时间都在使用 vue 开发后台管理系统，在摸索的过程中对 vue 本身和模块化、规范化开发有了更深的认知，现在记录下来，希望对其他需要开发项目的人有帮助。项目配置首先，在确定好使用的框架和组件库后，先...

spacewander 2019-08-02 16:00 评论0 收藏0