axios 上传文件封装_Vue实战——优化新闻列表页模块化抽离封装axios

女爷i 2023-01-03 01:49 48阅读 0赞

上文说到vue集成了axios并编写了一个新闻列表页，实现了新闻的列表展示：Vue实战——集成axios获取数据构建新闻列表页

本文将介绍如何抽离axios为独立的文件，并封装基本的get、post、put、batch请求方法。同时优化页面，让新闻列表页更漂亮。本项目git地址：

https://gitee.com/vuejslearn/news-list.git

打开项目，在src目录下新建文件夹：util。然后在util里新建http.js文件，这个文件将是我们抽离axios的核心文件。编辑http.js文件。

引入axios：

import axios from 'axios'

引入了axios后，就可以像上文中提到的各个请求方式，进行写请求的模板了：

/** * 封装get方法 * @param url * @param data * @returns {Promise} */export function get (url, params = {}) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then((response) => { resolve(response.data) }).catch((err) => { reject(err) }) })}/** * 封装post请求 * @param url * @param data * @returns {Promise} */export function post (url, data = {}) { return new Promise((resolve, reject) => { axios.post(url, data).then((response) => { resolve(response.data) }).catch((err) => { reject(err) }) })}/** * 封装patch请求 * @param url * @param data * @returns {Promise} */export function patch (url, data = {}) { return new Promise((resolve, reject) => { axios.patch(url, data).then((response) => { resolve(response.data) }).catch((err) => { reject(err) }) })}/** * 封装put请求 * @param url * @param data * @returns {Promise} */export function put (url, data = {}) { return new Promise((resolve, reject) => { axios.put(url, data).then((response) => { resolve(response.data) }).catch((err) => { reject(err) }) })}

至此，http.js 编辑完成。打开main.js，去掉之前引入的axios，改成http.js:

import { get, post, put, patch } from './util/http.js'

然后全局引用：

Vue.prototype.$get = getVue.prototype.$post = postVue.prototype.$put = putVue.prototype.$patch = patch

至此，已经注入到了全局中，以后我们在任何页面都可以使用它来请求服务了，ok，接下来修改新闻列表页的请求方法：

getData () { this.$get('https://unidemo.dcloud.net.cn/api/news').then((resp) => { this.newsArray = resp }) }

这样就完成了一次get请求。怎么样？很简单吧？重启项目，列表正确出现。但是发现，只有图片、标题、副标题，显得很空洞，而且排版也不好看，修改一下，增加作者头像、名称、出版时间，并改变页面排版：

我们采用了less的语法，让代码精简一下。

修改html模板：

![96f41830bb76c04eda45a12e424232e4.png][]

`{ { news.title }}`

`{ { news.summary }}`