项目实战-爬坑系列vue-cli3.x中本地封装axios数据请求（六）

本地简单封装axios数据请求
也可以参考：https://www.jianshu.com/p/993383798f30

接下来就有我来带大家去看看数据封装，终于设计到技术点了,如果直接看数据封装看不明白的可以看我上一篇博客，https://blog.****.net/wangzongyang1025_/article/details/89638237
介绍了axios怎么请求数据，接下来一起学习怎么封装axios吧，在这里也是简单的提示一下：只是简单的封装，项目中这样封装是不够看的，可以自行百度一下完整封装方法。

新建文件夹

2.fetch.js 中就是封装的是我们的数据：

项目实战-爬坑系列vue-cli3.x中本地封装axios数据请求（六）

import axios from "axios";
export function fetch(options) {
return new Promise((resolve,reject)=>{
    const instance = axios.create({
        headers:{
                 
        },
        timeout:10000
         });
         instance(options)
        .then(response=>{
             if(response.status == '200') {
                 if(response.status == '200'){
                    resolve(response.data)
                 }else {
                     reject(response.data.msg)
                 }
             }
         })
         .catch(err=>{
             reject(err)
        })    
     })
}

3.apis.js是我们请求的数据接口：

项目实战-爬坑系列vue-cli3.x中本地封装axios数据请求（六）

import { fetch } from "./fetch";
export function getTestData() {
return fetch({
    url: "/data",
    method: "get"
 })
}

4.然后我们就可以在我们需要的目录下面引用：

项目实战-爬坑系列vue-cli3.x中本地封装axios数据请求（六）

 <template>
   <div class="about">
     <h1>This is an about page</h1>
   </div>
 </template>
<script>
import { getTestData } from '@/api/apis.js';
export default {
  data() {
    return {
      data:null
    }
  },
  methods:{
    getTest() {
        getTestData()
        .then((res)=>{
          console.log(res)
        })
        .catch((err)=>{
          console.log(err)
        })
    }
  },
  mounted() {
    this.getTest()
  } 
};
</script>

5.在这里需要注意的问题是我们请求的是本地数据，所以我们自己写的数据：

项目实战-爬坑系列vue-cli3.x中本地封装axios数据请求（六）

如果你不用这个的话就需要将你的数据写到vue-cli3的public中，vue-cli2需要写到src的static中将本地的json数据，下面一篇文章去介绍一下问什么请求不到外面的数据，只能请求到静态文件里面的数据

项目实战-爬坑系列vue-cli3.x中本地封装axios数据请求（六）

相关推荐