The biggest difference between vue2 and vue3 is that vue2 uses the options API to compare with the composition API of vue3: aggregate code & amp; Logic reuse
How to use vue3 API to encapsulate Axios in vue2.0:
code directly:
1, create API folder in SRC, and create corresponding file
2, encapsulate some methods in Axios, such as get, post…
// http/axios.js
import instance from "./index"
/**
* @param {String} method Methods requested: get, post, delete, put
* @param {String} url The url of the request:
* @param {Object} data The parameter of the request.
* @param {Object} config The configuration of the request.
* @returns {Promise} returns a promise object, which is actually equivalent to the return value of the axios request data
*/
const axios = ({
method,
url,
data,
config
}) => {
method = method.toLowerCase();
if (method == 'post') {
return instance.post(url, data, {...config})
} else if (method == 'get') {
return instance.get(url, {
params: data,
...config
})
} else if (method == 'delete') {
return instance.delete(url, {
params: data,
...config
}, )
} else if (method == 'put') {
return instance.put(url, data,{...config})
} else {
console.error('未知的method' + method)
return false
}
}
export default axios
3. Encapsulate some Axios request interception and response interception in the index
here, I basically don’t do any interception, I can add them if I need
// http/index.js
import axios from 'axios'
//Create an instance of axios
var instance = axios.create({
baseURL: "http://192.168.0.7:8366", //interface unified domain name
timeout: 6000, //set timeout
headers: {
'Content-Type': 'application/json;charset=UTF-8;',
}
})
let loading;
//Number of requests being made
let requestCount = 0
//Show loading
const showLoading = () => {
if (requestCount === 0 && !loading) {
}
requestCount++;
}
//hidden loading
const hideLoading = () => {
requestCount--
if (requestCount == 0) {
}
}
//Request Interceptors
instance.interceptors.request.use((config) => {
showLoading()
// Determine if a token exists before each request is sent, and if it does, add the token to the header of each http request, so you don't have to add it manually for each request
const token = window.localStorage.getItem('token');
token && (config.headers.Authorization = token)
//If the request method is post, the data parameter is converted to a JSON string
if (config.method === 'POST') {
config.data = JSON.stringify(config.data);
}
return config;
}, (error) =>
// What to do with request errors
Promise.reject(error)).
//response interceptor
instance.interceptors.response.use(( response) => {
hideLoading()
//response success
console.log('Interceptor reported an error').
return response.data;
}, (error) => {
console.log(error)
//Response error
if (error.response && error.response.status) {
const status = error.response.status
switch (status) {
case 400:
message = 'Request Error';
break;
case 401:
message = 'Request Error';
break;
case 404:
message = 'Error requesting address';
break;
case 408:
message = 'Request timed out';
break;
case 500:
message = 'Internal server error!' ;
break;
case 501:
message = 'Service not implemented!' ;
break;
case 502:
message = 'Gateway error!' ;
break;
case 503:
message = 'Service unavailable!' ;
break;
case 504:
message = 'Gateway timeout!' ;
break;
case 505:
message = 'HTTP version is not supported';
break;
default:
message = 'Request failed'
}
ElMessage.error(message);
return Promise.reject(error);
}
return Promise.reject(error);
});
export default instance;
4. Finally, import these files into the NAV file
import axios from "../api/axios"
//Example request
//get
//If you need to wear parameters, you can still use the template string splice `/api/v1/0?id=${id}` and write the id in parentheses
export const mokePostD = (id) => {
return axios({
url: '/api/v1/0',
method: "post",
data,
config: {
headers: {
// 'Request-Type': 'wechat'
},
timeout: 10000
}
})
}
//post
export const mokePost = () => {
return axios({
url: '/api/v1/0',
method: "post",
data,
config: {
headers: {
// 'Request-Type': 'wechat'
},
timeout: 10000
}
})
}
5. Page
import { mokePost, mokePostD } from "../../api/nav";
import { ref, onMounted } from "@vue/composition-api";
export default{
setup(props, { root }){
onMounted(() => {
mokePost().then((res) => {
console.log(res);
});
}
}
}
requires a user name and password to log in, that is, I do not have access rights. When clicking cancel:
extension
