vue中的axios简单封装

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

---

前言

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

vue中的axios简单封装

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

步骤

1.安装axios

代码如下（示例）：
npm install axios

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

//request.js文件
import axios from "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
  },)
export default request

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

在api文件夹里建立js文件，js文件里的内容大同小异
代码如下（示例）：

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

3.在实例中使用

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

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

# 总结