Axios

云水舟

已于 2024-05-24 10:41:01 修改

阅读量156

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js node.js 前端

于 2024-05-24 10:39:13 首次发布

本文链接：https://blog.csdn.net/A57796/article/details/139168461

一、什么是axios：
axios是一种网络请求库，用于发送和接收请求。它可以通过promise机制来处理请求，使用jsonp的方式获取数据，也可以使用默认的get请求的参数拼接。axios还可以发送并发请求，使用全局请求配置格式和timeout来控制请求的执行。在封装网络请求时，可以使用promise包装、回调函数的方法或拦截器来处理请求。

二、axios的安装使用：

1、npm安装

npm install axios

2、在vue项目的main.js文件中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

3、在组件中使用axios

<script>
    export default {
        mounted(){
            this.$axios.get('/goods.json').then(res=>{
                console.log(res.data);
            })
        }
    }
</script>

三、Axios技术是原生的Ajax进行封装，简化书写
我们在之前的Ajax专题中有完整的介绍过Ajax和Axios技术

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible"content="ie=edge" />
<title>axios基本使用</title>
</head>
<body>
<1--两个按钮分别用来实现两种数据获取-->
<input type="button" value="get请求"class="get"><input type="button" value="post请求"class="post">
<!-- 官网提供的 axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list请求方法:get
请求参数:num(笑话条数,数字)响应内容:随机笑话
 
//事件绑定
document.querySelector(".get").onclick = function () {
// axios的get格式:get后跟url，response为返回休，err为错误 axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function (response) {
console.log(response);},function(err){
console.log(err);})
 
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg请求方法:post
请求参数:username(用户名,字符串)响应内容:注册成功或失败
*
 
/事件绑定
document.querySelector(".post").onclick =function(){
// axios的post格式:post后跟ur1和请求体，response为返回体，err为错误
axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"}).then(function(response ){
console.log(response); console.log(this.skill);},function (err) {
console.log(err);})
 
</script>
</body>