axios使用方法和axios的封装

最新推荐文章于 2024-07-25 22:35:58 发布

Bxfjbgm

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量312

点赞数

文章标签： ajax跨域问题

本文链接：https://blog.csdn.net/qq_53847179/article/details/116611930

版权

用法

1.安装axios库npm i axios -S
2.导入
import axios from ‘axios’
3.使用组件
axios.get(url)
.then(res=>res)
.catch(err=>err)

挂载全局方法axios的使用

main.js中导入axios
挂载在vue的原型上才在每个组件都可以使用
在这里插入图片描述

浏览器同源策略

在这里插入图片描述

get和post方式

1.两种get方式

在这里插入图片描述
2.两种post方式

其他方法

在这里插入图片描述

在这里插入图片描述

在main.js配置默认值可以简写代码

封装axios

为什么?
1.统一配置:baseURl,头信息,header等等
2.请求拦截,响应拦截,做预处理
3.扩展axios的方法
默认不支持jsonp
可以扩展jsonp方法

封装过程
1.导入
	import axios from "axios"
2.创建实例
	const request = axios.create({
baseURL:XXX,
timeout:3000,
headers:XXX

})
3.配置
4.拦截
request.interceptors.request.use(
function(config){},
function(err){}
)
request.interceptors.response.use(
function(req){},
function(err){}
)
5.扩展方法
import jsonp from “jsonp”
request.jsonp = function(){
return new Promise((resolve,reject)=>{
jsonp(url,config,(err,data)=>{})
})
}
6.导出
封装例子:
在这里插入图片描述