Axios has additions, deletions, modifications, and the corresponding post, delete, patch, and get methods. Next, let’s record the pits encountered with the delete method.
1. Package axios
import Vue from 'vue'
import axios from 'axios'
import {
Message, Loading } from 'element-ui'
import Cookies from 'js-cookie'
import router from '../../router/index'
// Vue.prototype.axios = axios;
// axios.defaults.withCredentials = true;
// Add a request interceptor
let loading //定义loading变量
function startLoading() {
//使用Element loading-start 方法
loading = Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading() {
//使用Element loading-close 方法
loading.close()
}
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
//http request 拦截器
axios.interceptors.request.use(
config => {
var token = ''
if (typeof Cookies.get('webToken') === 'undefined') {
} else {
token = Cookies.get('webToken')
}
config.headers = {
'Content-Type': 'application/json'
}
if (token != '') {
config.headers.Authorization = token;
}
showFullScreenLoading()
return config;
},
error => {
tryHideFullScreenLoading()
return Promise.reject(error);
}
);
//http response 拦截器
axios.interceptors.response.use(
response => {
//当返回信息为未登录或者登录失效的时候重定向为登录页面
if (response.data.code == '-2' || response.data.msg == '身份认证失败,请重新登录') {
router.push({
path: "/loginPass",
query: {
redirect: router.currentRoute.fullPath }//从哪个页面跳转
})
}
tryHideFullScreenLoading()
return response;
},
error => {
tryHideFullScreenLoading()
return Promise.reject(error)
}
)
export default axios;
2.api.js
import axios from './index'
import domain from './domain'
let baseUrl = domain.domain
export const focusAdd= function (params) {
return axios.post(`${
baseUrl}`+"/relation/subscroption", params);
}
export const focusDel = function (params) {
return axios.delete(`${
baseUrl}`+"/relation/subscroption", {
data:params});
}
export const wenyangDetail = function (params) {
return axios.get(`${
baseUrl}`+"/nation/pattrns/allInfo", {
params});
}
To be honest, I still don’t understand the http protocol very well. This is a summary of the project. When deleting, parameters can be passed in both params and body. In params, it is the same as get, like this {params}, in When in the body, you need to wrap another layer, like this {data:params}, it's ok. (Note: params are passed parameters)