【学习笔记】【领券联盟】前端(Nuxt.js)——6.封装axios常用请求

引子

一个网站前端展示的数据有很多，很多请求的代码也最好减少各个页面的偶尔程度，那么就将一些请求进行封装吧。

1. 封装axios的基本方法

在项目路径下创建一个utils文件夹，然后再创建一个http.js的文件，这个文件中封装http中的几个常用请求函数，如get,post,put,delete。如下：

import axios from "axios";

// 携带证书
axios.defaults.withCredentials = true;

// 设置超时时间
axios.defaults.timeout = 100000;  // 100s

// 导出方法，供其他调用使用
export default {
//get请求
  requestGet(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // post请求
  requestPost(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  // delete请求
  requestDelete(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.delete(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  // put请求
  requestPut(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.put(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

封装完毕之后，我们测试一下是否成功，需要注意的是，返回的结果已经是res.data了。 修改javascript内容如下：

<script>
 import http from "../utils/http";

export default {
  // vue生命周期函数
  asyncData(){
    console.log("test load data..");
    http.requestGet("https://api.sunofbeach.net/shop/discovery/categories").then(result =>{
      console.log(result.code)
      console.log(result.message)
      console.log(result.data)
    })
  }
}
</script>

依然是保存，运行，刷新浏览器查看，结果如图：

好了，说明封装的方法是没什么问题的。

2.封装网站常用api

接下来就在utils文件下创建api.js文件，用于存放网站常用的请求api的函数。书写如下：

import request from './http'; // 应该是将http整体导入，用request命名

export default {
  // 获取类别的方法
  getCategories(){
     // https://api.sunofbeach.net/shop/api/discovery/categories 原始视频中的链接无法访问，去掉api就可以了
    return request.requestGet("https://api.sunofbeach.net/shop/discovery/categories");
  }
}

然后继续在pages/index.vue中修改请求api的代码如下：

<script>
 import api from "../utils/api";

export default {
  // vue生命周期函数
  asyncData(){
    console.log("test load data..");
    api.getCategories().then(result =>{
      console.log(result.code)
      console.log(result.message)
      console.log(result.data)
    })
  }
}
</script>

接着依然是保存，运行，刷新浏览器，查看结果如下：

上面已经获取各个分类，那么我们再封装一个函数，获取一个分类的内容，在api.js中添加如下代码：

  // 获取分类内容
  getCategoriesContent(materialId, page){
    return request.requestGet("https://api.sunofbeach.net/shop/discovery/" + materialId + "/" + page)
  }

依然在pages/index.vue中测试，修改JavaScript代码如下：

<script>
 import api from "../utils/api";

export default {
  // vue生命周期函数
  asyncData(){
    console.log("test load data..");
    // api.getCategories().then(result =>{
    //   console.log(result.code)
    //   console.log(result.message)
    //   console.log(result.data)
    // })
    api.getCategoriesContent('9660', 1).then(result =>{
      console.log(result)
    })
  }

}
</script>

老样子，保存，运行，刷新浏览器，不出意外就得到了结果，这里就不截图了。

补充——asyncData

前面我们已经把数据获取回来了，接下来，我们应该渲染一下，其实就是让我们的Html页面显示出来，我们应该在哪个声明周期方法去拉取数据呢？这里不得不需要参考nuxt.js的介绍了： https://zh.nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle/#%E6%B5%81%E7%A8%8B%E5%9B%BE，感兴趣的自己查看咯。还是看看简单的图吧：

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。所以之前我们会刷新浏览器。接下来就该利用这个特性，将获取的数据渲染到页面上了。