引子
一个网站前端展示的数据有很多，很多请求的代码也最好减少各个页面的偶尔程度，那么就将一些请求进行封装吧。
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方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。所以之前我们会刷新浏览器。接下来就该利用这个特性，将获取的数据渲染到页面上了。
