vue-axios使用,vue使用axios调用后端接口
本文主要介绍Vue3如何使用axios发起网络请求，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
Vue3使用axios发起网络请求1。Axios是什么？2.如何安装Axios3？如何封装网络请求并全局实例化Axios 4？API.js是什么？5.5.http.js是什么？6.6.request.js是什么？7.如何请求Vue文件中封装的API？Vue3.0请求接口示例
Vue3使用axios发起网络请求
即使是小项目也会涉及到请求后端API，除非你的网站显示了一些不需要维护的静态数据。在第三篇文章中，我们来了解一下axios for Vue项目。
1.何为Axios？
请看Axios的官方描述，门户：官方文档。
Axios是一个基于promise的网络请求库，工作在node.js和浏览器中。这是同构的(例如，相同的代码集可以在browser和node.js中运行)。在服务器端，它使用native node.js http模块，而在客户端(浏览器端)，它使用XMLHttpRequests。
2.如何安装Axios
这部分我用了几个不同版本的node都没有错误，兼容性不错。
纱线添加轴
3.如何封装网络请求和全局实例化axios
官网的实例都是axios在单个文件中的本地实例化，项目中很少用到。
成功完成前一篇文章之后，您需要在项目src目录中创建一个新的api文件夹。
4. api.js是什么？
这封装了所有的API请求。您可以指定是否有参数以及请求的类型是GET、POST、DELETE还是PUT。
从导入http。/http.js
//获取验证码。这个函数指的是使用GET request来请求目标服务器的
验证码路由
导出函数getCaptcha() {
返回http.get(/captcha )
}
//验证用户名\密码，这里是指使用POST方法请求登录接口，并携带params对象作为参数。
导出函数verifyUserNameAPI(params) {
返回http.post(/login ，params)
}
5.http.js是什么？
从“@/api/request”导入请求
const http={
获取(url，参数){
常量配置={
方法：“get”，
网址：网址
}/*这里，如果GET请求有参数，则携带上传的参数。在…里
在网址里？在请求链接中*/
if (params) config.params=params
退货请求(配置)
},
发布(url，参数){
常量配置={
方法： post ，
网址：网址
}/*同样，传入用户需要发送到后台的参数。这些参数
消息中，运营商表述标准为JSON*/
if (params) config.data=params
退货请求(配置)
},
}
//公开接口，允许Vue文件或其他JS和TS文件使用http结构中的方法。
导出默认http
6.request.js是什么？
这是核心JS文件，指示后端地址、接口超时以及请求拦截器和响应拦截器。
从“axios”导入axios；
//创建自定义Axios对象
const Axios=axios.create({
base URL:“http://127 . 0 . 0 . 1:1234”，
超时：3000，
/*您也可以不设置内容类型。效果就是当你发出请求的时候。
Vue会先发送OPTIONS包检测路由是否存在，后端也会设置响应选项。
方法，否则将报告跨域错误；我在这里使用的Beego2不响应路由中的OPTIONS方法。
所以我设置了内容类型*/
标题：{
“内容类型”:“应用程序/x-www-form-urlencoded”
},
/*这个配置非常重要，允许axios将用户Cookie携带到后端。如果你不设置这个
Set-Cookie无效。此外，Chrome默认开启了SameSite check。如果
如果后端没有主动设置samesite=none，则set-cookie无效。详情请文末。
参考阮老师的现场讲解*/
withCredentials: true
});
axios . interceptors . request . use(req={
//请求拦截处理
//console.log(这里是请求拦截器，我拦截了请求，req)；
退货请求；
},错误={
console.log(在发送请求时发生错误，错误为，err)；
//这里不能直接放回呃，需要按照官方说明返回一个承诺
返回保证。拒绝(err)；
})
axios。截击机。回应。使用(RES={
//响应拦截处理
//console.log(响应拦截，RES)；
返回资源数据
},错误={
const err=错误。tostring()；
//按照实际的响应包进行解析，通过关键字匹配的方式
开关（真){
case err.indexOf(Network )！==-1:
console.log(后端服务器无响应或者统一资源定位器错误，err)；
打破；
case err.indexOf(timeout )！==-1:
console.log(请求后端服务器超时!，err)；
打破；
}
返回承诺。拒绝(错误);
})
//暴露爱可信实例化对象，允许所有文件调用爱可信
导出默认爱可信
7.如何在Vue文件中请求封装好的API呢？
//导入声明的应用程序接口请求函数
从" @/api/api "导入{获取验证码}；
从"天真界面"导入{使用消息}；
导出默认值{
setup() {
设captchaId=ref()；
onMounted(()={
//onMounted是某视频剪辑软件声明周期的钩子函数，由某视频剪辑软件提供，
//请参考某视频剪辑软件声明周期钩子官方文档
getcaptchaAPI()；
});
函数getcaptchaAPI() {
getCaptcha()。然后((res)={
/*这里的表示留数是响应成功是返回的数据，res.data说明获取报文
中的数据字段对应的值，我在设置声明使用的裁判，所以赋值时
需要使用captchaId.value的方式*/
上尉。值=研究数据；
})
//在这里处理错误。catch((err)=console。log(err))；
}
}
}
就到这里了，现在你的项目既能请求后端接口，又能进行路由跳转，具备了项目的基本条件，可以尝试写一个简单地页面了。
Vue3.0请求接口的例子
脚本
//getInTheaters为封装的接口请求
从" @/API/影片"导入{ getinheaters }；
导入{
反应性，
斗牛士，
在出发前，
在安装时，
onBeforeUnmount，
提供，
}来自vue ；
从" vue路由器"导入{用户外部}；
从" vuex "导入{ useStore }
导出默认值{
组件：{},
setup() {
恒定状态=反应({
参加人数：[],
});
//编程式导航
const router=user outer()；
const store=use store()；
onBeforeMount(()={
store.commit(setShowBack ，false)；
});
onBeforeUnmount(()={
store.commit(setShowBack ，true)；
});
const getInTheatersData=async()={
const res=await getInTheaters(
/gateway？ city id=310100 pagenum=1 pagesize=10 type=1k=3535827
);
状态。在thiaters=RES . data中。数据。电影；
onMounted(()={
//执行请求
getInTheatersData()；
});
//页面跳转
const goToList=(type)={
路由器。push(`/list/$ { type } `)；
};
//传递数据给子组件
提供(标题,电影);
返回{.toRefs(state)，goto list }；
};
},
};
/脚本
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。