Vue简单封装Axios {mtitle title="新建api.js文件"/}/* * @Author: lzx * @Date: 2021-10-12 13:12:08 * @LastEditors: lzx * @LastEditTime: 2021-10-12 14:20:44 * @Description: Fuck Bug * @FilePath: \xsy-auth\src\util\api.js */ // 引入axios import axios from 'axios' // axios.defaults.baseURL = 'http://127.0.0.1:8000' // 设置请求后端的URL地址 axios.defaults.timeout = 2000 // axios请求超时时间 // // 头部携带token axios.defaults.headers.common.token = sessionStorage.getItem('token') // get请求 const get = (url, param) => { return new Promise((resolve, reject) => { axios.get(url, { param }).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // put请求 const put = (url, data) => { return new Promise((resolve, reject) => { axios.put(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // delete请求 const del = (url, data) => { return new Promise((resolve, reject) => { axios.delete(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // post请求 const post = (url, data) => { return new Promise((resolve, reject) => { axios.post(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } export { get, put, del, post } {mtitle title="main.js中引用"/}// 引入封装的Axios import { get, put, del, post } from './util/api.js' // 使用封装的Axios Vue.prototype.$get = get Vue.prototype.$put = put Vue.prototype.$delete = del Vue.prototype.$post = post{mtitle title="全局页面中使用方式"/}// 1、get请求 thi.$get('url').then(res => { console.log(res.data) }) // 2、put请求 this.$put('url', {有携带 | 没有可以直接如下}).then(res => { console.log(res.data) }) this.$put('url').then(res => { console.log(res.data) }) //this.$delete...如上 //this.$post...如上