vue axios封装

最新推荐文章于 2024-08-17 22:12:47 发布

是一个小白

最新推荐文章于 2024-08-17 22:12:47 发布

阅读量71

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/wenjing0212/article/details/125483308

版权

本文档详细介绍了如何使用axios库在JavaScript环境中进行HTTP请求的配置，包括设置超时时间、响应拦截器以及get和post方法的使用。在main.js中将axios方法挂载到Vue原型上，以便在组件中便捷调用。此外，还展示了在页面中进行get和post请求的示例代码。

摘要由CSDN通过智能技术生成

第一步安装：npm install --save

第二步：创建一个api.js 文件

下面代码复制到api.js文件里面

import axios from 'axios';

axios.defaults.timeout = 30000;


// 添加响应拦截器
axios.interceptors.response.use(function (response) {

    //可以写if判断，提前拦截错误信息

    return response;

}, function (err) {

    return Promise.reject(err);
});


export function apiGet(url, params){ 
	return new Promise((resolve, reject) =>{ 
		axios.get(url, { 
			params: params,
			herader:{"token":sessionStorage.getItem('token')}
		}).then(res => {
			resolve(res.data);
		}).catch(err =>{
			reject(err.data) 
		}) 
   });
}


export function apiPost(url, params){
	return new Promise((resolve, reject) => {
			axios({
				method: 'post',
				url:url,
				data:params
			}).then(res => {
				resolve(res.data);
            }).catch(err =>{reject(err.data)})
        });
    }

第三步，在main.js 中声明原型使用他

import {apiGet,apiPost} from './api/https'
Vue.prototype.$apiGet  = apiGet
Vue.prototype.$apiPost = apiPost

第四步，在页面中使用

//请求格式类似于 http://localhost:8080/goods.json?id=1
//get请求
this.$axios.get('/goods.json',{
    			params: {
                    id:1
                }
			}).then(res=>{
					console.log(res.data);
				},err=>{
					console.log(err);
			})
//post请求
this.$axios.post('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			},err=>{
				console.log(err);
			})