vue项目封装axios请求

一，src/utils/request.js

import axios from 'axios'
import { getToken } from '@/utils/auth'
import store from '@/store'const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,withCredentials: true,timeout: 5000,// headers:{ //     "Access-Control-Allow-Origin": '*',//     "Access-Control-Allow-Headers": 'Origin, Content-Type, X-Auth-Token',//     "Access-Control-Allow-Methods": "POST, GET, PUT, OPTIONS, DELETE" ,// },
})// request interceptor
service.interceptors.request.use(config => {// do something before request is sentif(store.getters.token == null){// 首次登录--固定头部内容config.headers.client_id = 'jeecp'config.headers.client_secret = 'webApp'}else{config.headers.Authorization = 'Bearer '+ token}// if(config.method == 'post' || config.method == 'put'){// 在每个请求中加 parkId// config.data['parkId'] = Cookies.get('parkId')// console.log(config)// }return config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(/*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {const res = response.data// return resif(res.code != 0){Message({message: res.message || 'Error',type: 'error',duration: 5 * 1000})// 报错--根据 code 处理console.log("请求报错啦: ", res)}else{// 成功return res}},error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service

二，src/utils/api.js

import request from '@/utils/request'
import store from '../store'// post
export function getMessage(page, size, data) {return request({url: store.getters.gateway2 + '/admin/info_management/v1/page_information/' + page + '/' + size,method: 'post',data})
}export function getNoApprove(page, size, type, title, startTime, endTime) {return request({url: store.getters.gateway2 + '/informationAudit/list/' + page + '/' + size,method: 'get',params: {type,title,startTime,endTime,issue: 1,examined: 0}})
}export function getMessageByIdToApprove(data, infoId) {return request({url: store.getters.gateway2 + '/admin/info_management/v1/confirm/',method: 'put',data,params:{infoId}})
}export function delUploadImg(url) {return request({url: store.getters.gateway2 + '/upload/delFile',method: 'delete',url})
}

注意

传的参数类型：

1，url

url: store.getters.gateway2 + '/informationAudit/list/' + page + '/' + size

2，params

params:{infoId
}

3，query

data,

三，调用接口

import { addMessage } from '@/api/message'addMessage(this.formData).then(res => {console.log("add", res)if(res.code === 0){this.$message({type: 'succees',message: '添加成功!'});}else{this.$message({type: 'error',message: '请求出错!'});}}

vue项目封装axios请求相关推荐

vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
vue项目封装axios
先看一下我们的结构: 第一阶段配置: api文件夹说明 api文件夹存放接口 user.js import request from "../utils/request";// ...
vue打包后axios返回html,vue项目封装axios并访问接口
import axios from 'axios'import QSfrom 'qs';//import store from '@/store/index.js'; import { Message ...
vue项目中 axios 请求成功却进入catch中
这个算是线上的一个小问题吧就是我本来打算对接口返回的数据进行统一处理. 发现有的请求成功后并没有走 Promise.then的方法中, 像这种情况的话网上网友的有的说是我的then的方法里面有 ...
【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
Vue3+TypeScript 项目封装axios
Vue3+TypeScript 项目封装axios VUE CLI 中代码目录解构 config.js let BASE_URL = '' const TIME_OUT = 10000 //区分环境不 ...
封装 axios 请求
vue 封装 js 方法一.安装 axios 并引入: Axios 中文说明安装axios:npm install axios 因为基本上全局都会使用到 axios 方法,所以在 main.js ...
vue项目安装axios - cmd篇
vue项目的跨域请求问题, 首先,用 axios 比较好,现在是 vue2 官方推荐,vue-resource 已经不再维护了. . 参考文章1:axios可以解决跨域访问的问题吗? 注意: vue项 ...
springboot+Vue项目使用axios实现跨域(CROS)
springboot+Vue项目使用axios实现(CROS)跨域一.项目背景二.跨域资源共享 CORS 详解三.axios跨域实现 3.1 安装qs模块 3.2 axios使用四.sprin ...

vue项目封装axios请求

一，src/utils/request.js

二，src/utils/api.js

注意

1，url

2，params

3，query

三，调用接口

vue项目封装axios请求相关推荐

最新文章

热门文章