vue基础知识总结（2）--- axios的使用

标签：function axios articleList await js --- vue article

一.下载Vue3：

选择自己想要下载的项目文件夹，cmd回车打开命令栏，执行：

cnpm init vue@latest

然后等待一会就可以创建一个项目，并更改项目名：

√ 请输入项目名称： ... vue-project

之后按照提示输入对应的语句：

  cd vue-project
  cnpm install

我们等待几秒Vue3项目就成功创建出来了，之后进入NPM脚本框输入 npm run dev 或点击 dev 旁边的按钮就可以直接运行程序，之后我们就可以去查看Vue3的项目了。

二.Vue3使用axios进行前后端连接：

1.首先安装axios：

输入cnpm install axios来下载axios依赖：

2.axios的基本使用：

下面是axios官网链接：Axios API | Axios中文文档 | Axios中文网 (axios-http.cn)

（1）什么是axios：

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

（2）使用axios发送Get请求：

下面是使用axios发送Get请求的两种基本格式：

//使用之前需要导入axios
import axios from 'axios';
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

（3）使用axios发送Get请求的实例：

首先我们创建一个Vue3项目，并下载导入axios。
然后我们想让我们artical.vue项目显示就需要导入到App.vue中：

<script setup>
import ArticalVue from './components/Artical.vue'
</script>

<template>
 <ArticalVue/>
</template>

之后我们就开发我们的Artical.vue代码：

<template>
    <div>
        文章分类: <input type="text" v-model="searchConditions.category">
        发布状态: <input type="text" v-model="searchConditions.state">
        <button  @click="search">搜索</button><br /> <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>    
</template>

<script setup>
    import axios from 'axios';
    import { ref } from 'vue';
    //定义响应式数据 articleList
    const articleList = ref([]);
    //发送请求获取所有文章数据
    axios.get('http://localhost:8080/article/getAll')
    .then(result=>{
        //保存数据
        articleList.value = result.data;
    }).catch((err)=>{
        console.log(err);
    });
    //定义响应式数据 searchConditions
    const searchConditions = ref({
        category: '',
        state: ''
    })
    //声明search函数
    const search = function(){
        //发送请求完成搜索
        axios.get('http://localhost:8080/article/search',{params:{...searchConditions.value}})
        .then(result=>{
            articleList.value = result.data;
        })
        .catch((err)=>{
            console.log(err);
        })
    }
</script>

我们再来开发我们的后端代码进行联调测试：

@RestController
@RequestMapping("/article")
@CrossOrigin//支持跨域
public class ArticleController {

    private List<Article> articleList = new ArrayList<>();

    {
        articleList.add(new Article("医疗反腐绝非砍医护收入", "时事", "2023-09-5", "已发布"));
        articleList.add(new Article("中国男篮缘何一败涂地", "篮球", "2023-09-5", "草稿"));
        articleList.add(new Article("华山景区已受大风影响阵风达7-8级", "旅游", "2023-09-5", "已发布"));
    }

    //新增文章
    @PostMapping("/add")
    public String add(@RequestBody Article article) {
        articleList.add(article);
        return "新增成功";
    }

    //获取所有文章信息
    @GetMapping("/getAll")
    public List<Article> getAll(HttpServletResponse response) {
        return articleList;
    }

    //根据文章分类和发布状态搜索
    @GetMapping("/search")
    public List<Article> search(String category, String state) {
        return articleList.stream().filter(a -> a.getCategory().equals(category) && a.getState().equals(state)).collect(Collectors.toList());
    }
}

之后我们运行结果就是下面的图片：

但是这里有个问题，如果我们要是在别的.vue文件频繁的调用我们这个查询搜索的axios代码，显然很繁琐，难以复用，这个时候我们就需要将接口调用的js代码封装到.js文件中并以函数的形式暴露给外部。

（4）创建.js文件封装函数：

我们一般会再src/api/_.js这样的目录下创建article.js文件：

//导入axios
import axios from 'axios';
//暴露函数：在function前加上export
export function articleGetAllService(){
    //发送请求获取所有文章数据
    axios.get('http://localhost:8080/article/getAll')
    .then(result=>{
        //返回数据
        return result.data;
    }).catch((err)=>{
        console.log(err);
    });
}
export function articleSearchService(conditions){//传入conditions参数
    axios.get('http://localhost:8080/article/search',{params: conditions})
        .then(result=>{
            //返回数据
            return result.data;
        })
        .catch((err)=>{
            console.log(err);
        })
}

然后再Article.vue文件调用函数：

<script setup>
    //导入article.js文件
    import { articleGetAllService , articleSearchService} from  '@/api/article.js' //@ => src
    import { ref } from 'vue';
    //定义响应式数据 articleList
    const articleList = ref([]);
    //调用函数发送请求查询
    articleList.value = articleGetAllService();
    //定义响应式数据 searchConditions
    const searchConditions = ref({
        category: '',
        state: ''
    })
    //调用函数发送请求搜索
    const search = function(){
        articleList.value = articleSearchService({...searchConditions.value});
    }
</script>

但是我们运行后会发现页面列表没有正常的渲染出来，是因为在article.js文件中的axios是异步请求会等待服务器响应结果，需要耗费时间，这个时候我们不知道什么时候得到结果，所以需要同步等待服务器响应的结果并返回。

这个时候我们使用js提供的await，在axios前面加上await就会同步等待服务器响应这个结果，若服务器没有响应结果，则方法就不会结束。

而await只能使用在异步函数内，所以需要再我们function前加上async，然后我们等到服务器响应的结果就需要return返回结果，所以我们在await前面加上return就可以获得实际返回结果。

export async function articleGetAllService(){
    //发送请求获取所有文章数据
    //需要同步等待服务器响应的结果并返回 async await
    return await axios.get('http://localhost:8080/article/getAll')
        .then(result=>{
            //返回数据
            return result.data;
        }).catch((err)=>{
            console.log(err);
        });
}

而我们加上async就会将articleGetAllService这个函数会变成异步函数，所以同样也会得不到响应的结果来传递给articleList，所以为了解决这个问题，我们就会同步获取articleGetAllService的返回结果，而await需要包装到一个异步函数内，所以我们可以定义一个异步方法来包装。

//调用函数发送请求查询
const getAllArticle = async function(){
    //加上await将异步变成同步
    articleList.value = await articleGetAllService();
}

这个过程也就是不断套娃，最后我们可以让使用的vue文件能够使用同步方法就行。而反复加上await与async是为了将方法变成同步方法。

自己的理解 => 当你加上await时是同步，但是整体方法必须加上async会变成异步，这个时候只要保证你想使用的步骤加上await变成同步方法即可。

~~（不明白没关系，后面会使用拦截器来避免套娃）~~

而我们只是封装了articleGetAllService，所以我们需要手动调用getAllArticle来执行。

下面请看完整代码：

<script setup>
    //导入article.js文件
    import { articleGetAllService , articleSearchService} from  '@/api/article.js' //@ => src
    import { ref } from 'vue';
    //定义响应式数据 articleList
    const articleList = ref([]);
    //调用函数发送请求查询
    const getAllArticle = async function(){
        //加上await将异步变成同步
        articleList.value = await articleGetAllService();
    }
    //手动调用getAllArticle方法
    getAllArticle();
    //定义响应式数据 searchConditions
    const searchConditions = ref({
        category: '',
        state: ''
    })
    //调用函数发送请求搜索
    const search = async function(){
        articleList.value = await articleSearchService({...searchConditions.value});
    }
</script>

（5）axios.create({baseURL})的使用：

我们发现我们会不断频繁的调用http://localhost:8080/地址头，倘若域名发生变化，我们改写起来会非常麻烦，这个时候我们进行如下操作：

定义一个baseURL
调用axios.create()方法

const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});

使用这种格式，我们在使用的时候就会自动拼接。于是我们就可以这样写：

const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});
instance.get('/article/search',{params: conditions})
.then(result=>{
    //返回数据
    return result.data;
})
.catch((err)=>{
    console.log(err);
})

三.axios的拦截器：

下面代码是基于官网拷贝下来的：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

我们在src/util/目录创建request.js文件：

//定制请求的实例
//导入axios
import axios from 'axios';
//定义变量baseURL记录公共前缀
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});
//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        //将异步状态转换成失败状态，以便于走到catch来进行处理
        return Promise.reject(err);
    }
)
//暴露instance实例
export default instance;

之后我们就需要调整article.js代码：

//导入request.js文件
import request from '@/util/request.js'
export async function articleGetAllService(){
    //发送请求获取所有文章数据
    //需要同步等待服务器响应的结果并返回 async await
    return await request.get('/article/getAll');
}
export async function articleSearchService(conditions){//传入conditions参数
    return await request.get('/article/search',{params: conditions});
}

因为拦截器本身是异步的，所以我们不需要再article.js文件中return后添加await，所以我们直接删除就可以了，因为拦截器会拦截请求，返回数据的时候只需要在哪里渲染哪里同步一下数据就可以了。所以最终我们只需要在我们想要执行的方法加上await ，async就行了。

自己的理解 => 因为拦截器本身就是异步，也就是相当于我们最后再Article.vue文件中加入了同步，而过程中异步会因为最后的await最终变成同步等待结果。

下面请看完整代码：

request.js：（异步）

//定制请求的实例
//导入axios
import axios from 'axios';
//定义变量baseURL记录公共前缀
const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});
//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        //将异步状态转换成失败状态，以便于走到catch来进行处理
        return Promise.reject(err);
    }
)
//暴露instance实例
export default instance;

article.js：

//导入request.js文件
import request from '@/util/request.js'
export function articleGetAllService(){
    //发送请求获取所有文章数据
    //需要同步等待服务器响应的结果并返回 async await
    return request.get('/article/getAll');
}
export async function articleSearchService(conditions){//传入conditions参数
    return request.get('/article/search',{params: conditions});
}

Article.vue：

<script setup>
    //导入article.js文件
    import { articleGetAllService , articleSearchService} from  '@/api/article.js' //@ => src
    import { ref } from 'vue';
    //定义响应式数据 articleList
    const articleList = ref([]);
    //调用函数发送请求查询
    const getAllArticle = async function(){
        //加上await将异步变成同步
        articleList.value = await articleGetAllService();
    }
    //手动调用getAllArticle方法
    getAllArticle();
    //定义响应式数据 searchConditions
    const searchConditions = ref({
        category: '',
        state: ''
    })
    //调用函数发送请求搜索
    const search = async function(){
        articleList.value = await articleSearchService({...searchConditions.value});
    }
</script>

最终只需要在Article.vue文件调用异步方法的时候加上await来变成同步方法即可。

好了，今天的分享就到这里了，感谢收看，如果觉得对你有帮助的话记得三连一下！！！

标签：function,axios,articleList,await,js,---,vue,article
From： https://blog.csdn.net/2302_79840586/article/details/140809639