目錄：

一，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){// 首次登錄--固定頭部內(nèi)容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})// 報錯--根據(jù) 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}) }

注意

傳的參數(shù)類型：

1，url

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

2，params

params:{infoId }

3，query

data,

三，調(diào)用接口

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: '請求出錯!'});}} 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的vue项目封装axios请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。