vue中的axios简单封装

2022年8月30日11:17:24

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

提示:这里可以添加本文要记录的大概内容:

vue中的axios简单封装

提示:以下是本篇文章正文内容,下面案例可供参考

步骤

1.安装axios

代码如下(示例):
npm install axios

2.在根目录下新建utils文件夹,在utils文件夹下建立request.js文件。

//request.js文件import axiosfrom"axios"const request= axios.create({baseURL:"http://localhost:3000",//路径前缀timeout:300000,// 请求超时时间})// 请求拦截器
request.interceptors.request.use(config=>{return config},()=>{
console.log("错误")})// 响应拦截器
request.interceptors.response.use((response)=>{return response.data},)exportdefault request

2.在src目录下建立api文件夹

在api文件夹里建立js文件,js文件里的内容大同小异
代码如下(示例):

import request from"../utils/request";const api={
    posts:'/posts',
    comments:'/comments'}//应用列表
export functiongetposts(parameter){returnrequest({
        url: api.posts,
        method:'get',
        data: parameter})}
export functiongetcomments(parameter){returnrequest({
        url: api.comments,
        method:'get',
        data: parameter})}

3.在实例中使用

1.首先导入api中js文件中定义的getposts函数
2.直接使用

<script>import{getposts}from"../../api/json"exportdefault{name:"HelloWorld",data(){return{newsList:"",};},methods:{getNewsList(){getposts().then(res=>{this.newsList=res})},},created(){this.getNewsList();}};</script>

# 总结
  • 作者:奔跑的蜗牛00
  • 原文链接:https://blog.csdn.net/qq_43659954/article/details/123900619
    更新时间:2022年8月30日11:17:24 ,共 1170 字。