vue cli3封装axios
1.创建vue3项目,过程省略2.创建axios文件api.js,3.在api.js封装get,post请求。import axios from 'axios'const service = axios.create({baseURL: 'https://www.apiopen.top/', // api的base_urltimeout: 500000 // 请求超时...
·
1.创建vue3项目,过程省略
2.创建axios文件api.js,
3.在api.js封装get,post请求。
import axios from 'axios'
import { Message, MessageBox, Loading } from 'element-ui';
let 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()
}
const service = axios.create({
baseURL: process.env.BASE_API
timeout: 500000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
config.isForm ?
config.headers["content-type"] = "application/x-www-form-urlencoded" :
config.headers["content-type"] = "application/json";
startLoading();
return config
}, error => {
Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => {
endLoading();
return response.data
},
error => {
Message({
message:"网络错误,请重试!",
type:"error"
});
endLoading();
return Promise.reject(error)
}
)
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
* @returns Promise
*/
export function post(url, params = {}, isForm = false) {
return new Promise((resolve, reject) => {
service({
url,
method: 'post',
data: params,
isForm
}).then(response => {
resolve(response)
}).catch(error => {
reject(error)
})
})
}
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
* @returns Promise
*/
export function get(url, params = {}, isForm = false) {
return new Promise((resolve, reject) => {
service({
url,
method: 'get',
params: params,
isForm
}).then(response => {
resolve(response)
}).catch(error => {
reject(error)
})
})
}
4.访问,引入api.js,在方法里面调用get请求。
5.完成,效果图如下
更多推荐
已为社区贡献8条内容
所有评论(0)