vue中的axios简单封装

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

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

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>  # 总结