封装一个axios请求

最新推荐文章于 2024-09-29 10:05:19 发布

HdLmj

最新推荐文章于 2024-09-29 10:05:19 发布

阅读量230

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_52563089/article/details/130397637

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章展示了如何对axios库进行二次封装，创建一个定制的请求实例，设置了基础URL和超时时间，并添加了请求和响应拦截器。通过拦截器可以在请求发送前和响应返回后进行额外操作。此外，定义了GET、POST、PUT和DELETE的简便方法，简化API调用。

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

axios.js

//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";

//1.利用axios对象的方法create,去创建一个axios实例
//2.requests就是axios,只不过稍微配置一下
const requests = axios.create({
	//配置对象
	//基础路径，发请求的时候，路径当中会出现api，不用你手写
	baseURL:'http://127.0.0.1:3000',
	//请求时间超过5秒
	timeout:5000,

})

 //请求拦截器:在发请求之前，请求拦截器可以检测到,可以在请求发出去之前做一些事情
 requests.interceptors.request.use((config)=>{
 	//config是个配置对象，对象里面有一个属性很重要，headers请求头

 	return config;		
 });
 
// 响应拦截器 对响应数据处理
requests.interceptors.response.use(
  res=>{
    // 对响应数据做点什么
    return res
  },
  error=>{
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)


function get(obj){
    return requests(obj.url,{method:'GET',data:obj.data})
}

function post(obj){
    return requests(obj.url,{method:'POST',data:obj.data})
}

function put(obj){
    return requests({url:obj.url},{method:'PUT',data:obj.data})
}
function del(obj){
    return requests({url:obj.url},{method:'DELETE',data:obj.data})
}
// 对外暴露二次封装的axios，也就是requests
export {
    requests,
    get,
    post,
    put,
    del
}

在其他地方引入

import {get,post} from './axios'

export default {
	 dataList(data){
		return get({
			url:'/data/List',
		})
	},

	dataSearch(data){
		return  post({
			url: '/data/search',
			data: data,
		})
		
	},

	dataClass(data){
		return  post({
			url: '/data/class',
			data: data,
		})
	},

	 dataStore(data){
		return  post({
			url: '/data/store',
			data: data,
		})
	},
}