摘要:从到使用开发实战四封装有很多同学看了本系列的前几篇之后建议我暂时先不用,于是小肆之后将把换成继续下面的文章。前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备
从0到1使用VUE-CLI3开发实战(四): Axios封装
有很多同学看了本系列的前几篇之后建议我暂时先不用TS,于是小肆之后将把TS换成JS继续下面的文章。axios 简介
今天给大家带来项目中非常重要的一环,配置Axios,一起来看看吧。
首先要明白的是axios是什么:axios是基于promise(诺言)用于浏览器和node.js是http客户端。
axios的作用是什么呢:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
项目配置npm install axios
之后我们新建一个api文件夹用来放接口和axios的配置。
先给大家看看我配置好之后的文件夹目录结构:
可以说这次配置是我划分的比较详细的配置方法了,具体每个文件都分别做什么用,我们现在来看看吧。
这个文件主要创建axios实例并对拦截器进行配置,不理解拦截器的同学可以看看下图:
import axios from "axios" // 创建 axios 实例 let service = axios.create({ // headers: {"Content-Type": "application/json"}, timeout: 60000 }) // 设置 post、put 默认 Content-Type service.defaults.headers.post["Content-Type"] = "application/json" service.defaults.headers.put["Content-Type"] = "application/json" // 添加请求拦截器 service.interceptors.request.use( (config) => { if (config.method === "post" || config.method === "put") { // post、put 提交时,将对象转换为string, 为处理Java后台解析问题 config.data = JSON.stringify(config.data) } // 请求发送前进行处理 return config }, (error) => { // 请求错误处理 return Promise.reject(error) } ) // 添加响应拦截器 service.interceptors.response.use( (response) => { let { data } = response return data }, (error) => { let info = {}, { status, statusText, data } = error.response if (!error.response) { info = { code: 5000, msg: "Network Error" } } else { // 此处整理错误信息格式 info = { code: status, data: data, msg: statusText } } } ) /** * 创建统一封装过的 axios 实例 * @return {AxiosInstance} */ export default function() { return service }
index.js文件主要封装我们几个常用的方法,get、post、put、delete
import axios from "./axios" let instance = axios() export default { get(url, params, headers) { let options = {} if (params) { options.params = params } if (headers) { options.headers = headers } return instance.get(url, options) }, post(url, params, headers, data) { let options = {} if (params) { options.params = params } if (headers) { options.headers = headers } return instance.post(url, data, options) }, put(url, params, headers) { let options = {} if (headers) { options.headers = headers } return instance.put(url, params, options) }, delete(url, params, headers) { let options = {} if (params) { options.params = params } if (headers) { options.headers = headers } return instance.delete(url, options) } }
install.js文件可以把我们所有的api接口安装到全局,之后我们在main.js文件中导入就可以了。
import apiList from "./apiList" const install = function(Vue) { if (install.installed) { return install.installed = true Object.defineProperties(Vue.prototype, { $api: { get() { return apiList } } }) } export default { install }
import api from "./api/install" Vue.use(api)
把我们所有的api文件夹导入到这一个文件中来。
import matches from "./matches" import user from "./user" export default { matches, user }
根据不同的环境设定不同的baseUrl,在配置这个文件前,我们先需要做如下几件事:
1.根目录新建.env.dev文件并在文件内写入NODE_ENV = "dev"
2.在package.json文件内添加:
"build:dev": "vue-cli-service build --mode dev", "build:pre": "vue-cli-service build --mode pre",
以下是baseUrl.js的代码:
let baseUrl = "/api" // 本地代理 switch (process.env.NODE_ENV) { case "dev": baseUrl = "http://testserver.feleti.cn/" // 测试环境url break case "pre": baseUrl = "https://pre-server.feleti.cn" // 预上线环境url break case "production": baseUrl = "https://api.feleti.cn" // 生产环境url break } export default baseUrl
这两个文件夹都是根据api类型进行区分的,在项目以后也建议大家根据api类型划分出不同的文件存放,在小项目中这样做可能显得很麻烦,但如果项目比较大,这样做的优势就体现出来了。
我们就只看看matches文件夹下的内容:
把一个类型下的所有url接口放入这一个文件,我只放了一个暂时,可以继续添加。
import baseUrl from "../baseUrl" export default { matches: baseUrl + "/matches" }
有些接口需要在header中添加token或是其他,可以按如下配置。
import api from "../index" import urls from "./urls" const header = {} export default { matches(params) { // return出去了一个promise return api.get(urls.matches, params, header) } }
配置完上述全部文件就算是大功告成了,下面我们看看如何使用吧。
组件中调用created() { this.matches() }, methods: { async matches() { // 这里用try catch包裹,请求失败的时候就执行catch里的 try { //定义参数对象 let params = { type: "zc" } let res = await this.$api.matches.matches(params) console.log("getMatches -> res", res) } catch (e) { console.log("catch -> e", e) } } }
之后我们就可以在控制台看到我们调用成功的输出日志啦:
在实际工作中,我们尽量要把项目做的细致一些,尤其是项目开始之前的配置,今天所涉及到的很多文件在之后的配置中还会有进步的更改,比如配置用户相关的接口、配置全局loading等,大家只要能把今天的内容完全理解,之后再配置这里就很容易啦。
前置阅读:用vue-cli3从0到1做一个完整功能手机站(一)
从0到1开发实战手机站(二):Git提交规范配置
从0到1使用VUE-CLI3开发实战(三): ES6知识储备
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101414.html
摘要:小肆前几天发了一篇年精品开源项目库的汇总,今天小肆要使用的是在组件中排行第三的。记得点好看呦前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备从到使用开发实战四封装 小肆前几天发了一篇2019年Vue精品开源项目库的汇总,今天小肆要使用的是在UI组件中排行第三的Vuetify。 vuetify介绍 Vuetify是一个渐进式的框架,完全根据M...
摘要:详细具体的使用可以见文章手摸手,带你优雅的使用。为了加速线上镜像构建的速度,我们利用源进行加速并且将一些常见的依赖打入了基础镜像,避免每次都需要重新下载。 完整项目地址:vue-element-admin系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列四(vueAdmin 一...
摘要:无需使用服务器实时动态编译,而是使用预渲染方式,在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同,服务器渲染应用程序,需要处于运行环境。更多的服务器端负载。 目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...
摘要:从到使用开发实战六这是一个有代码洁癖的项目一个小故事一天我路过一座桥,碰巧看见一个人想跳河自杀。配置什么是是一个开源的代码检查工具,由于年月创建。使用编写,这样既可以有一个快速的运行环境的同时也便于安装。 从0到1使用VUE-CLI3开发实战(六):这是一个有代码洁癖的项目 一个小故事 一天我路过一座桥,碰巧看见一个人想跳河自杀。我跑过去对他大喊道:别跳,别死啊。为什么不让我跳?他说。...
阅读 1016·2021-09-13 10:29
阅读 3370·2019-08-29 18:31
阅读 2597·2019-08-29 11:15
阅读 2974·2019-08-26 13:25
阅读 1324·2019-08-26 12:00
阅读 2269·2019-08-26 11:41
阅读 3313·2019-08-26 10:31
阅读 1472·2019-08-26 10:25