资讯专栏INFORMATION COLUMN

从0到1使用VUE-CLI3开发实战(四): Axios封装

ThinkSNS / 2488人阅读

摘要:从到使用开发实战四封装有很多同学看了本系列的前几篇之后建议我暂时先不用,于是小肆之后将把换成继续下面的文章。前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备

从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.js

这个文件主要创建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

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

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
}
main.js中添加:
import api from "./api/install"
Vue.use(api)
apiList.js

把我们所有的api文件夹导入到这一个文件中来。

import matches from "./matches"
import user from "./user"

export default {
  matches,
  user
}
baseUrl.js

根据不同的环境设定不同的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
matches、user

这两个文件夹都是根据api类型进行区分的,在项目以后也建议大家根据api类型划分出不同的文件存放,在小项目中这样做可能显得很麻烦,但如果项目比较大,这样做的优势就体现出来了。

我们就只看看matches文件夹下的内容:

urls.js

把一个类型下的所有url接口放入这一个文件,我只放了一个暂时,可以继续添加。

import baseUrl from "../baseUrl"
export default {
  matches: baseUrl + "/matches"
}
index.js

有些接口需要在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

相关文章

  • 01使用VUE-CLI3开发实战(五):模块化VUEX及使用vuetify

    摘要:小肆前几天发了一篇年精品开源项目库的汇总,今天小肆要使用的是在组件中排行第三的。记得点好看呦前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备从到使用开发实战四封装 小肆前几天发了一篇2019年Vue精品开源项目库的汇总,今天小肆要使用的是在UI组件中排行第三的Vuetify。 vuetify介绍 Vuetify是一个渐进式的框架,完全根据M...

    fuyi501 评论0 收藏0
  • Vue.js学习

    摘要:一基础学习模式下图不仅概括了模式,还描述了在中是如何和以及进行交互的。关于这一点我们将在后续反应系统中讨论。父组件通过向下传递数据给子组件,子组件通过给父组件发送消息。这个对象必须是普通对象原生对象,及原型属性会被忽略。 Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。 其实和Jquery一样...

    TIGERB 评论0 收藏0
  • 手摸手,带你用vue撸后台 系列一(基础篇)

    摘要:详细具体的使用可以见文章手摸手,带你优雅的使用。为了加速线上镜像构建的速度,我们利用源进行加速并且将一些常见的依赖打入了基础镜像,避免每次都需要重新下载。 完整项目地址:vue-element-admin系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列四(vueAdmin 一...

    xiaotianyi 评论0 收藏0
  • vue服务端渲染demo将vue-cli生成的项目转为ssr

    摘要:无需使用服务器实时动态编译,而是使用预渲染方式,在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同,服务器渲染应用程序,需要处于运行环境。更多的服务器端负载。 目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...

    whinc 评论0 收藏0
  • 01使用VUE-CLI3开发实战(六):这是一个有代码洁癖的项目

    摘要:从到使用开发实战六这是一个有代码洁癖的项目一个小故事一天我路过一座桥,碰巧看见一个人想跳河自杀。配置什么是是一个开源的代码检查工具,由于年月创建。使用编写,这样既可以有一个快速的运行环境的同时也便于安装。 从0到1使用VUE-CLI3开发实战(六):这是一个有代码洁癖的项目 一个小故事 一天我路过一座桥,碰巧看见一个人想跳河自杀。我跑过去对他大喊道:别跳,别死啊。为什么不让我跳?他说。...

    genefy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<