vue axios 封装

import Cookies from 'js-cookies';
import axios from 'axios';

/**
 * 封装,拦截
 */

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers['token'] = 'token';
axios.defaults.headers.post['Content-Type'] = 'application/json';

const Axios = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 10000,
    headers: {
        'X-Custom-Header': 'foobar',
        'token':'token'
    }
});

Axios.interceptors.request.use(config => {
    //
    if(true) {
        config.headers['from'] = 'web'
        return config;
    } else {

        return config;
    }

},error => {
    return Promise.reject(error);
})

Axios.interceptors.response.use(res => {
    // res schema
    // res.status
    // res.data
    // res.statusText
    // res.headers
    // res.config
    // res.request
    if(res.status = 200) {
        return res.data;
    }
},error => {
    // 错误处理
    const code = error.response.status;
    switch (code ) {
        case code > 500:
            // toast('server:error')
            break;

        default:
            break;
    }
    return Promise.reject(error)
})
const get = (path,params) => {
    return Axios.get(path,{params: params})
}
const post = (path,params) => {
    return Axios.post(path,params)
}
// concurrent request
const all = (...args) => {
    return axios.all(args)
}
export {  get,post,all }

references

原文地址:https://www.cnblogs.com/rosendolu/p/11624395.html

时间: 2024-10-03 14:45:53

vue axios 封装的相关文章

vue axios 封装 全局使用

[不墨迹直接上码系列] 代码分三步: 1. 创建一个api.js,封装axios 2. 在main.js引入,并加到vue原型上 3. 全局使用 1. 创建+封装 //api.js import axios from "axios"; var apiUrl = ''; function yuanAjax(url,data,successCallback,errorCallback) { axios.post(apiUrl + url,data).then(function (res)

vue Axios 封装与配置项

import axios from "axios"; import qs from "qs"; import { Message } from "element-ui"; import router from "../router"; const Axios = axios.create({ baseURL: "/", // 因为我本地做了反向代理 timeout: 10000, responseType:

vue axios封装以及API统一管理

在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中.当项目越来越大的时候,接口的请求也会越来越多,怎么去管理这些接口?多人合作怎么处理?只有合理的规划,才能方便往后的维护以及修改, 安装 安装axios依赖包 cnpm install axios --save 引入 一般会我会在项目src中新建一个untils目录,其中base用于管理接口域名,http处理请求拦截和响应拦截,user.js负责接口文件(

vue axios封装

import axios from 'axios'import QS from 'qs'// import statuscode from './status_code' // 创建一个axios实例let server = axios.create({ baseURL: 'http://127.0.0.1:5000/', // 请求url timeout: 3000, // 超时处理 withCredentials: false // 是否跨域})axios.defaults.withCred

vue+axios+elementUI文件上传与下载

vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要介绍一种,elementUI官网 上传组件 http-request 这种属性的使用. 图片.png 代码如下: <el-upload class="uploadfile" action="" :http-request='uploadFileMethod' :sh

vue+axios通过formdata提交参数和上传文件

demo.vue 文件 <template> <div class="demo"> <input v-model="importForm.month" type="text" name="month"/> <input ref="importFile" type="file" name="importFile" @change

vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)

vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> <el-col :xs="24" :sm="11" :md="7" :lg="5" class="startTime"> <el-form-item prop="start_time&

vue axios 批量删除 数组参数

方法一:前端循环请求服务器端delete(id)方法 请问如何获得element-ui表格中的勾选项index,以实现批量删除功能 https://segmentfault.com/q/1010000012759131 方法二:传递 string类型字符串.例如: '1,2,3,4' ids =[1,2,3,4] url: '/investigator/submitAll/' + ids, method: 'post' 服务器端接收到: string类型字符串 '1,2,3,4' . 方法三:直

基于Vue + axios + WebApi + NPOI导出Excel文件

一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页(如会员信息,订单信息等)表格数据导出,如表格数据进行了条件筛选,则需要将条件传至后端api,筛选数据后,导出成Excel. 思考过前端导出的3种方案: 1.使用location.href 打开接口地址.缺点: 不能传token至后端api, 无法保证接口的安全性校验,并且接口只能是get方式请求.