100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue项目封装axios请求

vue项目封装axios请求

时间:2023-04-26 08:31:35

相关推荐

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 interceptorservice.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 interceptorservice.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'// postexport 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: '请求出错!'});}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。